Select

Form select component

import { Select, Box } from 'theme-ui'

<Select defaultValue="Hello">
  <option>Hello</option>
  <option>Hi</option>
  <option>Beep</option>
  <option>Boop</option>
</Select>
<Select defaultValue="Hello">
  <option>Hello</option>
  <option>Hi</option>
  <option>Beep</option>
  <option>Boop</option>
</Select>

Variants

Select variants can be defined in theme.forms and the component uses the theme.forms.select variant by default.

Custom arrow icon

<Select
  arrow={
    <Box
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentcolor"
      sx={{
        ml: -28,
        alignSelf: 'center',
        pointerEvents: 'none',
      }}>
      <path d="M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
    </Box>
  }
  defaultValue="Hello">
  <option>Hello</option>
  <option>Hi</option>
  <option>Beep</option>
  <option>Boop</option>
</Select>
<Select
  arrow={
    <Box
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentcolor"
      sx={{
        ml: -28,
        alignSelf: 'center',
        pointerEvents: 'none',
      }}>
      <path d="M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
    </Box>
  }
  defaultValue="Hello">
  <option>Hello</option>
  <option>Hi</option>
  <option>Beep</option>
  <option>Boop</option>
</Select>