Switch

Experimental

Low-level switch primitive that helps achieve accessible switch components that can be styled as needed.

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

Source Storybook

Switches provide controls that allows 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'

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.