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',
    },
  }}
/>

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.