Docs/Switch

Switch

Toggle switch with accessible role='switch' and aria-checked.

Usage

tsx

1'use client'
2import { Switch } from '@storm-ds/ui'
3import { useState } from 'react'
4
5const [on, setOn] = useState(false)
6<Switch checked={on} onChange={setOn} />

Default

Off

tsx

1const [on, setOn] = useState(false)
2
3<Switch checked={on} onChange={setOn} />

Sizes

Small

Medium

Large

tsx

1<Switch size="sm" checked={on} onChange={setOn} />
2<Switch size="md" checked={on} onChange={setOn} />
3<Switch size="lg" checked={on} onChange={setOn} />

Disabled

tsx

1<Switch checked={false} disabled />
2<Switch checked={true} disabled />

With Label

Notifications

Marketing emails

tsx

1const [notifications, setNotifications] = useState(true)
2
3<div className="flex items-center justify-between">
4  <span className="text-sm font-medium">Notifications</span>
5  <Switch checked={notifications} onChange={setNotifications} />
6</div>

Note

Switch is a client component. It requires `checked` and `onChange` props from a parent client component.

Props

Prop	Type	Default	Description
checked	boolean	-	Whether the switch is on
onChange	(checked: boolean) => void	-	Called when toggled
size	'sm' \| 'md' \| 'lg'	'md'	Switch size
className	string	-	Custom classes
disabled	boolean	false	Disables the switch

Use with AI

Create a Next.js client component using Storm UI's Switch. Import: `import { Switch } from '@storm-ds/ui'`. Requires 'use client'. Uses role="switch" and aria-checked for accessibility. Needs checked and onChange props from parent state. Use the `size` prop to control switch dimensions: sm, md, lg. Example: `const [on, setOn] = useState(false); <Switch size="lg" checked={on} onChange={setOn} />`

Checkbox

RadioGroup