@elemental-ui-alpha/switch

Switch

import { Switch } from '@elemental-ui-alpha/switch';

State

Uncontrolled

Uncontrolled components' form data is handled by the DOM itself.

<Switch />

Controlled

Control the state of the switch to interact with other parts of your application.

const [checked, setChecked] = React.useState(false);
const onChange = (value, event) => {
  setChecked(value);
  console.log(event);
};

return <Switch checked={checked} onChange={onChange} />;

Style

Size

The switch comes in different sizes:

• small
• medium (default)
• large

<Stack gap="small">
  <Switch size="small" />
  <Switch size="medium" />
  <Switch size="large" />
</Stack>

Tone

The switch comes in different tones:

<Stack direction="horizontal" gap="small">
  <Switch checked tone="action" />
  <Switch checked tone="accent" />
  <Switch checked tone="caution" />
  <Switch checked tone="critical" />
  <Switch checked tone="positive" />
  <Switch checked tone="neutral" />
</Stack>