NativeSelect adapter

AvailableCompatibility adapter

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

Migrate existing option and optgroup markup incrementally with this compatibility adapter. Use Select for new screens.

Don't assume the DOM API of the browser's native select popup. Use the value and onChange adapter instead.

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

Anatomy

HTML option children → adapter → shared Select

Keyboard and accessibility

Keys work as in the shared Select. A hidden input submits the value with the form.

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 { NativeSelect } from '@surflane/ui'

<NativeSelect aria-label='Environment' name='environment'>
  <option value='staging'>Staging</option>
  <option value='production'>Production</option>
</NativeSelect>

Key API

NativeSelect adapter — common wrapper props
Prop	Contract	Default
`children`	option / optgroup elements	—
`value / onChange`	native-style change adapter	—

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