Select

Purpose

Select replaces the browser's native <select> element with a fully styled, keyboard-accessible custom dropdown. It is used whenever travellers need to choose a single value from a list — picking a destination region, cabin class, board basis, or trip duration. The component preserves all native accessibility semantics while matching the Kuoni visual language.

Usage

Use Select when the list has more than 4 options, when options may carry icons or disabled states, or when the choice is part of a form that requires inline validation feedback. For 2–4 options, prefer Radio Button instead — it shows every choice at a glance with no extra click. For a single binary choice, use Checkbox or Toggle rather than a two-option Select.

Select appears inside forms — booking flows, enquiry forms, and account preference screens — wherever a single value must be picked from a bounded list.

Anatomy

Variants

Default

The standard single-selection dropdown with a placeholder.

With help text

Provide a helpText prop to guide the traveller before they interact.

With icons

Options can carry a leading icon node — useful for flag or category icons.

With disabled options

Pass disabled: true on individual option objects to prevent selection.

Error state

Pass an error string to show inline validation feedback and switch the border to danger colour.

Disabled

The entire field is non-interactive when disabled is true.

States

Best practices

<Select label="Destination region" options={regions} />

<Select placeholder="Destination region" options={regions} />

<Select
  label="Board basis"
  helpText="Board basis determines which meals are included."
  options={boardBasis}
/>

// Avoid
<Select label="Cabin class" error="Invalid selection." options={cabins} />

// Prefer
<Select label="Cabin class" error="Please select a cabin class to see prices." options={cabins} />

<Select label="Number of travellers" required options={travellers} />

// Avoid
<Select label="Room type" options={[{ value: 'suite', label: 'Suite', disabled: true }]} />

// Prefer
<Select
  label="Room type"
  helpText="Suites are unavailable for your selected dates."
  options={[{ value: 'suite', label: 'Suite', disabled: true }]}
/>

<Select label="Departure airport" options={twentyAirports} />

// Avoid for a 2-option list
<Select label="Adults" options={[{ value: '1', label: '1' }, { value: '2', label: '2' }]} />

Props

Select

Accessibility

Keyboard interaction

ARIA

• The trigger button has role="combobox" with aria-expanded, aria-haspopup="listbox", and aria-controls pointing to the panel.
• The panel has role="listbox".
• Each option has role="option" and aria-selected.
• Disabled options have aria-disabled="true" and are skipped during keyboard navigation.
• When error is set, the error element has role="alert" and the trigger references it via aria-describedby.
• When required is true, the trigger has aria-required="true".

Related components

• Sort Dropdown — a purpose-built compact single-select for reordering results, sharing Select's listbox interaction pattern.
• Radio Button — the better choice for short lists (2–4 options) where showing all choices at once is preferable to a dropdown.
• Checkbox — for multi-select or standalone binary choices rather than a single value from a list.