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	"lg" | "md" | "sm"	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	string	The track color of the Switch when on.	-
offTrackColor	string	The track color of the Switch when off.	-
onThumbColor	string	The thumb color of the Switch when on.	-
offThumbColor	string	The thumb color of the Switch when off.	-
colorScheme	string	Color scheme to be used for the Switch	-
_hover	any	Props when Switch is hovered. Accepts all the Switch props.	-

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

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.