Select

It adds default styling and the css prop.

A Select needs to be associated with a label for accessibility purposes, so rather than using the Select component directly in a UI, consider using a SelectField, which provides a Label and displays validation errors. Use this Select to compose more complex Field type components.

<Select css={{ width: 300 }}>
  <option value="apples">Apples</option>
  <option value="bananas">Bananas</option>
</Select>

Accessibility

For accessibility purposes the component needs to have the id prop set, to link it to the label it is associated with. If a label is not available, please add an aria-label to ensure that the component remains accessible

Placeholder

The component can display a placeholder without a value by passing the placeholder property.

<Select placeholder="Please select a fruit" css={{ width: 300 }}>
  <option value="apples">Apples</option>
  <option value="bananas">Bananas</option>
</Select>

Disabled select

The component has a disabled state, by setting the disabled property.

<Select disabled placeholder="Please select a fruit" css={{ width: 300 }}>
  <option value="apples">Apples</option>
  <option value="bananas">Bananas</option>
</Select>

Disabled Option

The component can show an option as disabled, by setting the disabled property on the option.

<Select placeholder="Please select a fruit" css={{ width: 300 }}>
  <option value="apples">Apples</option>
  <option value="bananas" disabled>
    Bananas
  </option>
</Select>