v0.5.14

NativeSelect

Native HTML select dropdown with consistent styling and accessibility

Installation

pnpm add @wandercom/design-system-web

Usage

15 lines
import {
  NativeSelect,
  NativeSelectOption,
} from '@wandercom/design-system-web/ui/native-select';

export function Example() {
  return (
    <NativeSelect>
      <NativeSelectOption value="">Choose an option</NativeSelectOption>
      <NativeSelectOption value="1">Option 1</NativeSelectOption>
      <NativeSelectOption value="2">Option 2</NativeSelectOption>
      <NativeSelectOption value="3">Option 3</NativeSelectOption>
    </NativeSelect>
  );
}

Examples

Native select demonstrates default styling, sizing options, disabled state, and invalid state.

Loading example...
20 lines
<NativeSelect>
  <NativeSelectOption value="">Choose an option</NativeSelectOption>
  <NativeSelectOption value="1">Option 1</NativeSelectOption>
  <NativeSelectOption value="2">Option 2</NativeSelectOption>
</NativeSelect>

<NativeSelect size="sm">
  <NativeSelectOption value="">Small select</NativeSelectOption>
  <NativeSelectOption value="1">Option 1</NativeSelectOption>
</NativeSelect>

<NativeSelect disabled>
  <NativeSelectOption value="">Disabled select</NativeSelectOption>
  <NativeSelectOption value="1">Option 1</NativeSelectOption>
</NativeSelect>

<NativeSelect aria-invalid="true" defaultValue="invalid">
  <NativeSelectOption value="invalid">Invalid selection</NativeSelectOption>
  <NativeSelectOption value="1">Option 1</NativeSelectOption>
</NativeSelect>

With option groups

Group related options using option groups.

Loading example...
11 lines
<NativeSelect>
  <NativeSelectOption value="">Choose a city</NativeSelectOption>
  <NativeSelectOptGroup label="East Coast">
    <NativeSelectOption value="nyc">New York</NativeSelectOption>
    <NativeSelectOption value="bos">Boston</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="West Coast">
    <NativeSelectOption value="sf">San Francisco</NativeSelectOption>
    <NativeSelectOption value="la">Los Angeles</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Props

NativeSelect

size?:

'default' | 'sm'
Size variant of the select. Defaults to default.

disabled?:

boolean
Disables the select when true.

defaultValue?:

string
The default selected value when uncontrolled.

value?:

string
The controlled selected value.

onChange?:

(event: React.ChangeEvent<HTMLSelectElement>) => void
Callback fired when the selected value changes.

aria-invalid?:

boolean
Marks the select as invalid for accessibility and applies error styling.

className?:

string
Additional CSS classes to apply.

NativeSelectOption

value:

string
The value of this option.

disabled?:

boolean
Disables this specific option.

className?:

string
Additional CSS classes to apply.

NativeSelectOptGroup

label:

string
The label for this option group.

className?:

string
Additional CSS classes to apply.

Notes

NativeSelect uses the browser's built-in select element, providing native accessibility and mobile behavior. For more advanced customization and features, consider using the Select component instead.

NativeSelect