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

Many of the included form components (e.g. Checkbox, Radio, Slider) use 3 colors for their default appearance:

• gray, for the default state
• primary, for the active state
• highlight, for the focus outline

If you’re only looking to change the colors, providing custom values for these colors in theme.colors is the easiest path.

Further customization

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