Skip to content

Select

Pick one value from a short list in a popover, with typeahead and keyboard support. Posts through a hidden input.

FormsIsland

Examples

With descriptions

Option descriptions explain what each choice means.

How Switchboard signs in to this server.

Example
<Field id="auth-type" label="Authentication" hint="How Switchboard signs in to this server.">
  <Select
    name="auth"
    defaultValue="oauth"
    options={[
      { value: 'oauth', label: 'OAuth', description: 'Sign in with the provider in a browser window.' },
      { value: 'bearer', label: 'Bearer token', description: 'Send a fixed token in the Authorization header.' },
      { value: 'none', label: 'None', description: 'The server is public.' },
    ]}
  />
</Field>

Placeholder, error and sizes

Choose a transport. Most servers use HTTP.

Example
<Field id="transport" label="Transport" error="Choose a transport. Most servers use HTTP.">
  <Select
    name="transport"
    placeholder="Choose transport"
    options={[{ value: 'http', label: 'HTTP' }, { value: 'sse', label: 'SSE' }]}
  />
</Field>
<Select
  aria-label="Sort servers"
  size="sm"
  defaultValue="recent"
  options={[{ value: 'recent', label: 'Recently used' }, { value: 'name', label: 'Name' }]}
/>

Usage

Usage
import { Select } from '@switchboard/ui'

<Field id="auth-type" label="Authentication">
  <Select name="auth" options={authOptions} defaultValue={server.auth} />
</Field>

Props

Every component also takes mix, for css() and mixins applied after its own style.

Select

Select props
PropTypeDefaultDescription
options*SelectOption[]–{ value, label, description?, disabled? } in display order.
namestring–Name of the hidden input that posts the value.
defaultValuestring–Initially selected value. Without one the placeholder shows.
placeholderstring'Select…'Trigger text until a value is chosen.
size'sm' | 'md' | 'lg'–Trigger height 28, 32 or 36px.
invalidboolean–aria-invalid and a danger ring. Defaults to the Field error.
disabledboolean–Disables the trigger.
idstring–Trigger id. Overrides the Field id.
aria-labelstring–Name when there is no Field.

Reads id, aria-describedby and invalid from a Field.

Accessibility

  • The trigger is a <button> named by the Field label; the popup is a listbox with arrow keys, Home/End, typeahead and Escape.
  • The chosen option has aria-selected and a check mark, not colour alone.
  • The value posts through a hidden input, but choosing needs JavaScript; for forms that must work before hydration, use a RadioGroup.

Guidance

Do

  • Use for 4 to 15 options.
  • Order options by likelihood or alphabetically, and say so.

Don’t

  • Use a Select for two or three options; a SegmentedControl or RadioGroup shows them all.
  • Rely on the native required attribute; validate on the server.