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>

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>

Variants

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