ComponentsFormSwitch

Switch

6 colors · 3 sizes · icons · label positions · card style

StatesColorsSizesWith iconsLabel positionCard style

States

Live preview

Off, on, disabled off, and disabled on

Off

Disabled off

Disabled on

App.tsx

tsx

1<Switch label="Off" />
2<Switch label="On"            defaultChecked />
3<Switch label="Disabled off"  disabled />
4<Switch label="Disabled on"   disabled defaultChecked />

Colors

Live preview

Six color variants — default, secondary, success, warning, error, and info

App.tsx

tsx

1<Switch label="Default (primary)" color="default"   defaultChecked />
2<Switch label="Secondary"         color="secondary" defaultChecked />
3<Switch label="Success"           color="success"   defaultChecked />
4<Switch label="Warning"           color="warning"   defaultChecked />
5<Switch label="Error"             color="error"     defaultChecked />
6<Switch label="Info"              color="info"      defaultChecked />

Sizes

Live preview

sm, md (default), and lg switch sizes

Small

Medium (default)

Large

App.tsx

tsx

1<Switch label="Small"            size="sm" defaultChecked />
2<Switch label="Medium (default)" size="md" defaultChecked />
3<Switch label="Large"            size="lg" defaultChecked />

With icons

Live preview

Show icons inside the thumb using checkedIcon and uncheckedIcon props

Wi-Fi

Notifications

Sync

App.tsx

tsx

1const [wifi, setWifi]   = useState(true)
2const [bell, setBell]   = useState(false)
3const [check, setCheck] = useState(true)
4 
5<Switch
6  label="Wi-Fi"
7  checkedIcon="check"
8  uncheckedIcon="close"
9  checked={wifi}
10  onChange={e => setWifi(e.target.checked)}
11/>
12<Switch
13  label="Notifications"
14  checkedIcon="bell"
15  checked={bell}
16  onChange={e => setBell(e.target.checked)}
17/>
18<Switch
19  label="Sync"
20  checkedIcon="check"
21  checked={check}
22  onChange={e => setCheck(e.target.checked)}
23/>

Label positions

Live preview

Label can appear on the right (default) or left of the switch

Label on the right (default)

Label on the left

App.tsx

tsx

1const [left, setLeft]   = useState(true)
2const [right, setRight] = useState(false)
3 
4<Switch label="Label on the right (default)" labelPosition="right" checked={right} onChange={e => setRight(e.target.checked)} />
5<Switch label="Label on the left"            labelPosition="left"  checked={left}  onChange={e => setLeft(e.target.checked)} />

Card style

Live preview

Bordered card layout — ideal for settings panels

Dark mode

Switch to a darker color scheme

Auto-save

Save your work automatically every minute

Analytics

Help improve the product by sharing usage data

App.tsx

tsx

1const [darkMode,  setDarkMode]  = useState(false)
2const [autoSave,  setAutoSave]  = useState(true)
3const [analytics, setAnalytics] = useState(false)
4 
5<Switch
6  card
7  label="Dark mode"
8  description="Switch to a darker color scheme"
9  checked={darkMode}
10  onChange={e => setDarkMode(e.target.checked)}
11/>
12<Switch
13  card
14  label="Auto-save"
15  description="Save your work automatically every minute"
16  checked={autoSave}
17  onChange={e => setAutoSave(e.target.checked)}
18/>
19<Switch
20  card
21  label="Analytics"
22  description="Help improve the product by sharing usage data"
23  checked={analytics}
24  onChange={e => setAnalytics(e.target.checked)}
25  disabled
26/>

Props

PropTypeDefaultDescription

labelReactNode—Label text shown next to the switch

helperTextstring—Helper text shown below the label

descriptionstring—Description inside the card (card=true only)

size'sm' | 'md' | 'lg''md'Size of the switch

labelPosition'left' | 'right''right'Position of the label relative to the switch

checkedIconstring—Icon name shown inside the thumb when on

uncheckedIconstring—Icon name shown inside the thumb when off

cardbooleanfalseWraps the switch in a bordered card

disabledbooleanfalseDisables the switch

checkedboolean—Controlled checked state

defaultCheckedbooleanfalseUncontrolled initial checked state

onChangeReact.ChangeEventHandler<HTMLInputElement>—Change event callback