Switch

A toggle control for binary on/off states. Semantically uses role="switch" and a hidden <input type="checkbox"> for full accessibility.

Import

import { Switch } from '@mitek/ui';

Default

<Switch />
<Switch defaultChecked />

With label

Enable notificationsDark mode

<Switch label="Enable notifications" />
<Switch label="Dark mode" defaultChecked />

With description

Marketing emailsReceive product updates and announcements.Two-factor authenticationAdd an extra layer of security to your account.

<Switch
  label="Marketing emails"
  description="Receive product updates and announcements."
/>

Label position

Label on right (default)Label on left

<Switch label="Label on right (default)" labelPosition="right" />
<Switch label="Label on left" labelPosition="left" />

Sizes

SmallMedium (default)Large

<Switch size="sm" label="Small" />
<Switch size="md" label="Medium" />
<Switch size="lg" label="Large" />

Disabled

Disabled offDisabled on

<Switch label="Disabled off" disabled />
<Switch label="Disabled on" disabled defaultChecked />

Controlled

const [enabled, setEnabled] = React.useState(false);
 
<Switch
  label="Notifications"
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the switch
`label`	`ReactNode`	—	Label next to the switch
`description`	`string`	—	Helper text below the label
`labelPosition`	`'left' \| 'right'`	`'right'`	Which side the label appears
`checked`	`boolean`	—	Controlled checked state
`defaultChecked`	`boolean`	`false`	Uncontrolled initial state
`disabled`	`boolean`	`false`	Disables interaction
`onChange`	`ChangeEventHandler`	—	Called when toggled
`id`	`string`	auto	Links label `for` to input `id`
`className`	`string`	—	Additional class on the wrapper

Badge