Dropdown

Dropdowns allow users to select a single option from a list. This component is a custom listbox with full keyboard navigation support.

Default

A standard dropdown with a label and placeholder. Options are revealed on click or by pressing Enter or Space.

Growing zone

With descriptions

Add a description to individual options to provide additional context below the option label.

Growth stage

Hint

Use hint to provide additional context below the dropdown.

Growing zone

Error

Use error to show a validation message below the dropdown.

Growing zone

Disabled

Add disabled to prevent interaction.

Growing zone

Usage

Pass an options array where each item has a value and label. Control the selected value with value and onChange. Use hint for helper text and error for validation messages.

Explore the Dropdown component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.

Growing zone

Properties

Disabled

Label

Placeholder

Hint

Error

<Dropdown
  label="Growing zone"
  placeholder="Select a zone"
  options={options}
  value={value}
  onChange={setValue}
/>