Switch

The Switch component is an alternative to the Checkbox component. You can switch between enabled or disabled states.

Examples

Basic

Sizes

Track & Thumb Color

Color Schemes

Props

Name	Type	Description	Default
size	ResponsiveValue<number | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | ... 28 more ... | (string & {})>	The size (width and height) of the switch.	md
isDisabled	boolean	If true, set the disabled to the invalid state.	-
name	string	The input name of the Switch when used in a form.	-
onToggle	() => any	Function called when the state of the Switch changes.	-
isChecked	boolean	If true, set the Switch to the checked state.	-
defaultIsChecked	boolean	If true, the checkbox will be initially checked.	-
isInvalid	boolean	If true, set the switch to the invalid state.	-
onTrackColor	ResponsiveValue<(string & {}) | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | ... 232 more ... | "dark.900">	The track color of the Switch when on.	-
offTrackColor	ResponsiveValue<(string & {}) | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | ... 232 more ... | "dark.900">	The track color of the Switch when off.	-
onThumbColor	ResponsiveValue<(string & {}) | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | ... 232 more ... | "dark.900">	The thumb color of the Switch when on.	-
offThumbColor	ResponsiveValue<(string & {}) | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | ... 232 more ... | "dark.900">	The thumb color of the Switch when off.	-
colorScheme	string	Color scheme to be used for the Switch	-
_hover	Omit<ISwitchProps, "_hover">	Props when Switch is hovered. Accepts all the Switch props.	-

Switch implements Switch from React Native, View, ColorProps, LayoutProps, BorderProps, TypographyProps, ShadowProps, PositionProps, FlexProps, BackgroundProps

Accessibility

• On mobile, uses native switch which is fully accessible.
• On web, it uses checkbox with a role set to switch.

Keyboard Interactions

Name	Description
Space	Toggles the component's state.