Forms

Several primitive components are included for building accessible forms.

import {
  Label,
  Input,
  Select,
  Textarea,
  Radio,
  Checkbox,
  Slider,
} from 'theme-ui'

<Box
  as='form'
  onSubmit={e => e.preventDefault()}>
  <Label htmlFor='username'>Username</Label>
  <Input
    name='username'
    id='username'
    mb={3}
  />
  <Label htmlFor='password'>Password</Label>
  <Input
    type='password'
    name='password'
    id='password'
    mb={3}
  />
  <Box>
    <Label mb={3}>
      <Checkbox />
      Remember me
    </Label>
  </Box>
  <Label htmlFor='sound'>Sound</Label>
  <Select name='sound' id='sound' mb={3}>
    <option>Beep</option>
    <option>Boop</option>
    <option>Blip</option>
  </Select>
  <Label htmlFor='comment'>Comment</Label>
  <Textarea
    name='comment'
    id='comment'
    rows='6'
    mb={3}
  />
  <Flex mb={3}>
    <Label>
      <Radio name='letter' /> Alpha
    </Label>
    <Label>
      <Radio name='letter' /> Bravo
    </Label>
    <Label>
      <Radio name='letter' /> Charlie
    </Label>
  </Flex>
  <Label>
    Slider
  </Label>
  <Slider mb={3} />
  <Button>
    Submit
  </Button>
</Box>
<Box
  as='form'
  onSubmit={e => e.preventDefault()}>
  <Label htmlFor='username'>Username</Label>
  <Input
    name='username'
    id='username'
    mb={3}
  />
  <Label htmlFor='password'>Password</Label>
  <Input
    type='password'
    name='password'
    id='password'
    mb={3}
  />
  <Box>
    <Label mb={3}>
      <Checkbox />
      Remember me
    </Label>
  </Box>
  <Label htmlFor='sound'>Sound</Label>
  <Select name='sound' id='sound' mb={3}>
    <option>Beep</option>
    <option>Boop</option>
    <option>Blip</option>
  </Select>
  <Label htmlFor='comment'>Comment</Label>
  <Textarea
    name='comment'
    id='comment'
    rows='6'
    mb={3}
  />
  <Flex mb={3}>
    <Label>
      <Radio name='letter' /> Alpha
    </Label>
    <Label>
      <Radio name='letter' /> Bravo
    </Label>
    <Label>
      <Radio name='letter' /> Charlie
    </Label>
  </Flex>
  <Label>
    Slider
  </Label>
  <Slider mb={3} />
  <Button>
    Submit
  </Button>
</Box>

Theming

Add styles for form elements in the theme.forms object.

// example theme
{
  forms: {
    label: {
      fontSize: 1,
      fontWeight: 'bold',
    },
    input: {
      borderColor: 'gray',
      '&:focus': {
        borderColor: 'primary',
        boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
        outline: 'none',
      },
    },
    select: {
      borderColor: 'gray',
      '&:focus': {
        borderColor: 'primary',
        boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
        outline: 'none',
      },
    },
    textarea: {
      borderColor: 'gray',
      '&:focus': {
        borderColor: 'primary',
        boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
        outline: 'none',
      },
    },
    slider: {
      bg: 'muted',
    },
  },
}