Switch

ARIA
RTL

Switch is a control that is used to quickly switch between two possible states.

Switches are only used for these binary actions that occur immediately after the user “flips” the switch.

They are commonly used for “on/off” switches.

Based on Headless UI.

Switch

Default

Sizes

Disabled

With icons

Custom background colour

Using with HTML forms

Code examples for full customization

Switch props

NameTypeRequiredDefaultDescription
checkedbooleanNofalseIs switch checked/unchecked.
disabledbooleanNo_Set disabled/not disabled switch
namestringNo-The name used when using this component inside a form.
offBgColorstringNobg-beerusTailwind class for custom off-state background color
offIconJSX.Element | stringNo-Set icon for unchecked state
onBgColorstringNobg-piccoloTailwind class for custom on-state background color
onChange(data) => voidNo-The function to call when the switch is toggled.
onIconJSX.Element | stringNo-Set icon for checked state
size2xs | xs | smNosmThe option's value.
valuestringNo-The value used when using this component inside a form, if it is checked.