Forms

Select

Single-select dropdown with an outlined trigger, floating label, helper text, and ARIA combobox semantics. Options are passed as data via the options prop.

Examples

Basic
Loading preview
<Select label="Country" defaultValue="us" options={[
  { label: 'United States', value: 'us' },
  { label: 'Brazil', value: 'br' },
]} />

API

PropTypeDefaultDescription
options{ label, value, disabled? }[]requiredThe selectable options.
labelReactNodenoneFloating label.
value / defaultValuestringnoneControlled or uncontrolled value.
error / errorMessageboolean / ReactNodenoneError treatment and message.

Guidelines

Do

  • Use Select for choosing one option from a known list.

Avoid

  • Do not use Select for free text; use TextField.

Import from @hub/ds-components. Interactive playground: Storybook. Figma Code Connect node 164-404.