Select

An input that provides a selection of options.

It implements the <select> element.

Props

...props

Type…* (optional)

Additional props for the container; a <select> element.

Examples

Simple.
import { Select } from 'device-agnostic-ui'

<Select>
  <option>Option A</option>
  <option>Option B</option>
</Select>
Required, with a placeholder option.
import { Select } from 'device-agnostic-ui'

<Select required>
  <option value="" disabled selected>Options</option>
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</Select>
With a default value.
import { Select } from 'device-agnostic-ui'

<Select value="B">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</Select>
With multiple option selection allowed. Note: Due to cross browser rendering and usability issues it’s recommended to use a <Toggle> group instead.
import { Select } from 'device-agnostic-ui'

<Select multiple size="2">
  <option>Option A</option>
  <option>Option B</option>
</Select>
With a size matching the count of options + groups.
import { Select } from 'device-agnostic-ui'

<Select size="6">
  <optgroup label="Group 1">
    <option>Option A</option>
    <option>Option B</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option C</option>
    <option>Option D</option>
  </optgroup>
</Select>

Tags