;
-}
diff --git a/src/components/form/switch/index.js b/src/components/form/switch/index.js
deleted file mode 100644
index 893cd7f7f6c..00000000000
--- a/src/components/form/switch/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { EuiSwitch } from './switch';
diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts
new file mode 100644
index 00000000000..6c4ce9a8635
--- /dev/null
+++ b/src/components/form/switch/index.ts
@@ -0,0 +1 @@
+export { EuiSwitch, EuiSwitchEvent, EuiSwitchProps } from './switch';
diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
deleted file mode 100644
index 06c490887e9..00000000000
--- a/src/components/form/switch/switch.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Component, Fragment } from 'react';
-
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import makeId from '../../form/form_row/make_id';
-import { EuiIcon } from '../../icon';
-
-export class EuiSwitch extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- switchId: props.id || makeId(),
- };
- }
-
- render() {
- const {
- label,
- id,
- name,
- checked,
- disabled,
- compressed,
- onChange,
- className,
- ...rest
- } = this.props;
-
- const { switchId } = this.state;
-
- const classes = classNames(
- 'euiSwitch',
- {
- 'euiSwitch--compressed': compressed,
- },
- className
- );
-
- return (
-
-
-
-
-
-
- {!compressed && (
-
-
-
-
-
- )}
-
-
-
- {label && (
-
- )}
-
- );
- }
-}
-
-EuiSwitch.propTypes = {
- name: PropTypes.string,
- id: PropTypes.string,
- label: PropTypes.node,
- checked: PropTypes.bool,
- onChange: PropTypes.func,
- disabled: PropTypes.bool,
- compressed: PropTypes.bool,
-};
diff --git a/src/components/form/switch/switch.test.js b/src/components/form/switch/switch.test.tsx
similarity index 65%
rename from src/components/form/switch/switch.test.js
rename to src/components/form/switch/switch.test.tsx
index 50927c7fa6e..a564df98ca1 100644
--- a/src/components/form/switch/switch.test.js
+++ b/src/components/form/switch/switch.test.tsx
@@ -4,17 +4,25 @@ import { requiredProps } from '../../../test/required_props';
import { EuiSwitch } from './switch';
+const props = {
+ checked: false,
+ label: 'Label',
+ onChange: () => {},
+};
+
jest.mock('../form_row/make_id', () => () => 'generated-id');
describe('EuiSwitch', () => {
test('is rendered', () => {
- const component = render();
+ const component = render(
+
+ );
expect(component).toMatchSnapshot();
});
test('assigns automatically generated ID to label', () => {
- const component = render();
+ const component = render();
expect(component).toMatchSnapshot();
});
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
new file mode 100644
index 00000000000..f1ccbb71d8e
--- /dev/null
+++ b/src/components/form/switch/switch.tsx
@@ -0,0 +1,116 @@
+import React, {
+ ButtonHTMLAttributes,
+ FunctionComponent,
+ ReactNode,
+ useState,
+} from 'react';
+import classNames from 'classnames';
+
+import { CommonProps, Omit } from '../../common';
+import makeId from '../../form/form_row/make_id';
+import { EuiIcon } from '../../icon';
+
+export type EuiSwitchEvent = React.BaseSyntheticEvent<
+ React.MouseEvent,
+ HTMLButtonElement,
+ EventTarget & {
+ checked: boolean;
+ }
+>;
+
+export type EuiSwitchProps = CommonProps &
+ Omit, 'onChange'> & {
+ /**
+ * Whether to render the render the text label
+ */
+ showLabel?: boolean;
+ /**
+ * Must be a string if `showLabel` prop is false
+ */
+ label: ReactNode | string;
+ checked: boolean;
+ onChange: (event: EuiSwitchEvent) => void;
+ disabled?: boolean;
+ compressed?: boolean;
+ };
+
+export const EuiSwitch: FunctionComponent = ({
+ label,
+ id,
+ name,
+ checked,
+ disabled,
+ compressed,
+ onChange,
+ className,
+ showLabel = true,
+ type = 'button',
+ ...rest
+}) => {
+ const [switchId] = useState(id || makeId());
+ const [labelId] = useState(makeId());
+
+ const onClick = (
+ e: React.MouseEvent
+ ) => {
+ const event = (e as unknown) as EuiSwitchEvent;
+ event.target.checked = !checked;
+ onChange(event);
+ };
+
+ const classes = classNames(
+ 'euiSwitch',
+ {
+ 'euiSwitch--compressed': compressed,
+ },
+ className
+ );
+
+ if (showLabel === false && typeof label !== 'string') {
+ console.warn(
+ 'EuiSwitch `label` must be a string when `showLabel` is false.'
+ );
+ }
+
+ return (
+
+
+
+ {showLabel && (
+ //