Version: 3.2.1

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#

NameDescription
SpaceToggles the component's state.