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