Switch

Form switch input component

import { Switch } from 'theme-ui'

<Switch label="Enable email alerts?" />
<Switch label="Enable email alerts?" />

Input state style &:checked

The Switch component renders several elements, among other things an <input type="checkbox" />, the state of which can be used to update the style.

However, since this input is hidden by CSS (the "visual switch" is a Box), applying for instance the &:checked CSS selector will not show any difference.

To show different style based on the input state, you can use Emotion’s & selector

<Switch
  label="Enable email alerts?"
  sx={{
    bakgroundColor: 'gray',
    // This will not be visible since the input is hidden
    // '&:checked': {
    //   backgroundColor: 'primary'
    // },
    // This will be visible
    'input:checked ~ &': {
      backgroundColor: 'primary',
    },
  }}
/>
<Switch
  label="Enable email alerts?"
  sx={{
    bakgroundColor: 'gray',
    // This will not be visible since the input is hidden
    // '&:checked': {
    //   backgroundColor: 'primary'
    // },
    // This will be visible
    'input:checked ~ &': {
      backgroundColor: 'primary',
    },
  }}
/>

labelPosition

By default, the switch comes first, with the label to the right of it. If you'd like to change the ordering, set the labelPosition prop to "start", or the default value, "end".

<Switch label="Use 24-Hour Time" labelPosition="start" />
<Switch label="Use 24-Hour Time" labelPosition="start" />

<Switch label="Auto-Correction" labelPosition="end" />
<Switch label="Auto-Correction" labelPosition="end" />

External label

Even though the Switch component already renders a label, but you can also opt-in for an external label instead.

import { Box, Flex, Label, Switch } from 'theme-ui'

<Flex
  sx={{
    justifyContent: 'space-between',
    alignItems: 'center',
    py: 4,
  }}
>
  <Label htmlFor="enable-email-alerts" sx={{ flex: 1 }}>
    Enable email alerts?
  </Label>
  <Box>
    <Switch id="enable-email-alerts" />
  </Box>
</Flex>
<Flex
  sx={{
    justifyContent: 'space-between',
    alignItems: 'center',
    py: 4,
  }}
>
  <Label htmlFor="enable-email-alerts" sx={{ flex: 1 }}>
    Enable email alerts?
  </Label>
  <Box>
    <Switch id="enable-email-alerts" />
  </Box>
</Flex>

Variants

Switch variants can be defined in theme.forms and the component uses the theme.forms.switch variant by default.