7onicDESIGN SYSTEM

Switch

Switch is a toggle control for instantly switching settings on and off. Use when changes take immediate effect.

5
Colors
3
Sizes
5
Positions
Radix
Base

Playground

Preview
D
Size
Color
Position
Icon
State
Options
<Switch
  label="Dark mode"
/>

Sizes

sm
Track24×14
Thumb12px
Travel10px
Font12px
Gap8px
default
Track32×18
Thumb16px
Travel14px
Font14px
Gap10px
lg
Track40×22
Thumb20px
Travel18px
Font16px
Gap12px

Features

With Label

Use the label prop to attach a label to the switch.

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

Label Position

Change label placement with labelPosition prop. Default is end (right side).

end (default)
start
top
bottom
sides
<Switch label="End" />
<Switch label="Start" labelPosition="start" />
<Switch label="Top" labelPosition="top" />
<Switch label="Bottom" labelPosition="bottom" />
<Switch startLabel="Off" endLabel="On" />

With Icon

Display icons inside the thumb with checkedIcon / uncheckedIcon props. Auto-hidden at sm size.

Check / X
Moon / Sun (lg)
<Switch
  checkedIcon={<Check />}
  uncheckedIcon={<X />}
/>

<Switch
  size="lg"
  checkedIcon={<Moon />}
  uncheckedIcon={<Sun />}
  label="Dark mode"
/>

States

Off
On
Disabled Off
Disabled On
<Switch />
<Switch defaultChecked />
<Switch disabled />
<Switch disabled defaultChecked />

API

Props

checkedundefined
boolean

On/off state for controlled mode

defaultCheckedundefined
boolean

Initial state for uncontrolled mode

onCheckedChangeundefined
(checked: boolean) => void

Callback on state change

size"default"
"sm" | "default" | "lg"

Switch size

labelundefined
string

Switch label text

labelPosition"end"
"start" | "end" | "top" | "bottom"

Label placement position

startLabelundefined
string

Left-side label (sides layout)

endLabelundefined
string

Right-side label (sides layout)

color"default"
"default" | "primary" | "success" | "warning" | "error"

Track and icon color when checked

checkedIconundefined
ReactNode

Icon displayed in thumb when checked

uncheckedIconundefined
ReactNode

Icon displayed in thumb when unchecked

disabledundefined
boolean

Disabled state

requiredundefined
boolean

Required field

nameundefined
string

Form name attribute

valueundefined
string

Form value attribute. Radix default: "on"

Anatomy

1
2
3
Enable notifications
Track width32px
Track height18px
Thumb size16px
1
Track
Switch outer track
2
Thumb
Sliding knob
3
Label
Text label (optional)

Best Practices

✓

Recommended

  • ✓Use for settings with immediate effect
  • ✓Use with clear labels
  • ✓Use for on/off toggles in settings
  • ✓Choose default state carefully
✕

Avoid

  • ✗Use Checkbox when form submission is needed
  • ✗Use Checkbox for multi-select scenarios
  • ✗Don't use without a label
  • ✗Avoid negative labels (use "Enable" not "Disable")

Accessibility

Keyboard

SpaceToggle on/off
TabMove focus

ARIA Attributes

  • role="switch" Auto-applied
  • aria-checked Auto-managed
  • Focus indicator
  • label expands click area