Switch

Alpha

A control that allows the user to toggle between checked and not checked.

Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Switches provide controls that allow the user to toggle between on or off, and are functionally similar to checkboxes, except that they provide a binary choice and no intermediate value.

Switch follows the WAI-ARIA authoring practices for a switch.

Import

import {Switch} from '@fuegokit/react'

Additional styling guides and examples are coming soon. For now, explore the examples at Storybook.

Usage

<Box as="form">
  <Box as="label" htmlFor="airplane-mode" sx={{paddingRight: 3, color: 'text.default'}}>
    Airplane mode
  </Box>

  <Switch id="airplane-mode">
    <Switch.Thumb>
      <VisuallyHidden>Airplane mode</VisuallyHidden>
    </Switch.Thumb>

Accessibility

Switch adheres to to the requirements for an element with the switch role. Since switch, checkbox, and toggle button all offer binary input, they are often functionally interchangeable. Choose the role that best matches both the visual design and semantics of the user interface.