Select

A native select with the look of an Input.

Usage

Pass the rows and two functions: one for the text of each option, one for its value. The options are rendered for you.

tsx

const [value, setValue] = useState("");

<Label spaced htmlFor="language">language</Label>
<Select
  id="language"
  value={value}
  onChange={(event) => setValue(event.target.value)}
  options={languages}
  placeholder="choose a language"
  valueExtractor={({ row }) => row.code}
  itemExtractor={({ row }) => row.label}
/>

language

Clearing the value

By default the placeholder can't be chosen again. canBeEmpty keeps it in the list, so the field can be cleared.

tsx

const [value, setValue] = useState("en");

<Label spaced htmlFor="optional">language, optional</Label>
<Select
  id="optional"
  canBeEmpty
  value={value}
  onChange={(event) => setValue(event.target.value)}
  options={languages}
  placeholder="No language"
  valueExtractor={({ row }) => row.code}
  itemExtractor={({ row }) => row.label}
/>

language, optional

States

tsx

<Select
  active
  defaultValue="it"
  options={languages}
  valueExtractor={({ row }) => row.code}
  itemExtractor={({ row }) => row.label}
/>

<Select
  disabled
  defaultValue="it"
  options={languages}
  valueExtractor={({ row }) => row.code}
  itemExtractor={({ row }) => row.label}
/>

In a form

tsx

<form onSubmit={handleSubmit}>
  <Select
    name="language"
    required
    defaultValue=""
    options={languages}
    placeholder="choose a language"
    valueExtractor={({ row }) => row.code}
    itemExtractor={({ row }) => row.label}
  />
  <Button as="button" type="submit">
    <Button.Label>save</Button.Label>
  </Button>
</form>

noteThe placeholder has an empty value, so required blocks the form until something is chosen.

Reference

prop	type	default
`options?`	`readonly T[]`	`[]`	the rows; one option each
`itemExtractor?`	`({ row, index }) => string`	`—`	the text of each option
`valueExtractor?`	`({ row, index }) => string \| number`	`—`	the value of each option; also its key. The index if omitted
`placeholder?`	`string`	`—`	the text shown while nothing is chosen
`canBeEmpty?`	`boolean`	`false`	lets the user choose the placeholder again, to clear the field
`active?`	`boolean`	`false`	keeps the border highlighted; visual only
`clickable?`	`boolean`	`true`	false makes the field inert
`…rest`	`props of select`	`—`	value, onChange, name, required, disabled…