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.