Version: 3.0.0

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.
  • Spacebar toggles the switch.