Select | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

No preview action taken.

Usage

Pick one option from a fixed list, or several with multiple, such as a filter of projects. If the list is long enough to need search, use Combobox.

Don't use Select to run actions. Use Menu instead. Check the selected result and the submitted value together.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Select → Trigger / Value / SVG chevron → Portal / Positioner / List / Item / Indicator

Keyboard and accessibility

Enter, Space, or an arrow key opens the listbox. Arrow keys and typing move between items. Escape closes only the listbox and returns focus.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Select } from '@surflane/ui'

<Select
  name='environment'
  aria-label='Environment'
  defaultValue='staging'
  options={[
    { value: 'staging', label: 'Staging' },
    { value: 'production', label: 'Production' },
  ]}
/>

Key API

Select — common wrapper props
Prop	Contract	Default
`options`	{ value, label, disabled? }[], or groups { label, options }	required
`value / onValueChange`	controlled value + callback	—
`defaultValue / name / required / disabled`	selection and form props	—
`multiple / labels`	several values on one line, such as a filter: the trigger names one choice, counts several and reads labels.all when every option is chosen; the first option chooses all or none. value and defaultValue are string[]. For a long list to search, with chips, use Combobox multiple	false / All, None, n selected
`width`	fill takes the container's width, as a form field does; content fits the longest option and keeps that width, for a header or toolbar	fill
`ref`	the trigger button, as triggerRef	—

The table lists the common wrapper's main props. See the package type declarations for the full types.