Skip to content
Theme UI
GitHub

Switch

Form switch input component

import { Switch } from 'theme-ui'

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

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'

Variants

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

Edit the page on GitHub
Previous:
Checkbox
Next:
Slider