Switch
import { Switch } from '@enmovil/ui-design-system';
An on/off toggle with Enmovil colour variants. It can show labels inside the switch for the on and off states.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
variant | string | No | 'default' | 'primary', 'default', 'secondary' | Colour of the switch when it is on: default (grey), primary (primary colour) or secondary (success green). Defaults to default. |
className | string | No | — | — | Extra CSS class added to the switch. |
defaultChecked | boolean | No | — | — | Whether the switch starts on when its state is not controlled with checked. |
checkedChildren | ReactNode | No | — | — | Content shown inside the switch when it is on, such as "ON". |
unCheckedChildren | ReactNode | No | — | — | Content shown inside the switch when it is off, such as "OFF". |
disabled | boolean | No | — | — | Disables the switch, so it cannot be toggled. |
Other attributes
Switch passes 12 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onChange | SwitchChangeEventHandler | Fires when the switch is toggled, with the new checked state. |
onClick | SwitchChangeEventHandler | Fires on every click, with the new checked state. |
onFocus | FocusEventHandler<HTMLButtonElement> | Fires when the switch receives focus. |
onBlur | FocusEventHandler<HTMLButtonElement> | Fires when the switch loses focus. |
onMouseEnter | MouseEventHandler<HTMLButtonElement> | Fires when the pointer enters the switch. |
onMouseLeave | MouseEventHandler<HTMLButtonElement> | Fires when the pointer leaves the switch. |
Children
Switch does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default Switch example.
Loading playground…
Storybook
Open Switch in Storybook to try every story with the full set of controls.