Toggle

Toggles are a type of checkbox that shows up in a larger on/off format.

React

live

<Stack direction="column" spacing="400">
  <Toggle>Unchecked</Toggle>
  <Toggle isChecked>Checked</Toggle>
  <Toggle isDisabled>Disabled</Toggle>
</Stack>

Props

Attribute	Usage
colorMode	Used to indicate dark or light mode
isDisabled	The disabled state is used to convey temporarily unavailable actions
isChecked	The checked state is used to explicitly mark a switch as in the on state
label	Accessibile label—always provide if visible label is not present

ColorMode

Default for colorMode is light, but you can also specify a dark mode for use on dark backgrounds.

live

<Stack direction="column" bg="neutral.900" p="200" borderRadius="300">
  <Toggle colorMode="dark">I'm idle</Toggle>
  <Toggle colorMode="dark" isChecked>
    I'm checked
  </Toggle>
  <Toggle colorMode="dark" isDisabled>
    I'm disabled
  </Toggle>
</Stack>

React Native

Font Scaling

This component supports dynamic font scaling for accessibility, capped at 1.35x. See Typography — Font Scaling for details.

Toast

Tooltip