Toggle

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

React

Toggle composes Chakra’s Switch.

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

Props

AttributeUsage
colorModeUsed to indicate dark or light mode
isDisabledThe disabled state is used to convey temporarily unavailable actions
isCheckedThe checked state is used to explicitly mark a switch as in the on state
labelAccessibile 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.

<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