Switch

Switches toggle between two states (on/off) with a visual toggle thumb. They are commonly used for settings and preferences.

Preview

Wi-Fi

Bluetooth

Airplane mode

Usage

tsx

1
2
3
4
5
6
import { Switch } from '@e-infra/design-system'

<Switch id="airplane-mode" />
<Label htmlFor="airplane-mode">Airplane Mode</Label>

<Switch id="notifications" defaultChecked />

Props

Prop	Type	Default	Description
checked	boolean	-	Checked state (controlled)
defaultChecked	boolean	-	Initial checked state (uncontrolled)
disabled	boolean	`false`	Disable the switch
required	boolean	`false`	Require selection
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Radix UI Switch props

State

State	Visual
Off	Thumb on left, gray track
On	Thumb on right, primary track