Native Select

Plain <select>: native mobile pickers, works without JS, ideal for long simple lists.

Import

import { NativeSelect } from '@marbleui/ui'

Props

<NativeSelect>

Prop	Type	Default
description	`ReactNode`	`—`
label	`ReactNode`	`—`
variant	`FieldVariant`	`—`

Also accepts HTML element props (286).

Usage notes

The browser’s own <select>, good for long simple lists, native mobile pickers and no-JS use. For custom option rendering or search use Select or ComboBox.

<NativeSelect label="Country" defaultValue="Netherlands" onChange={(e) => setCountry(e.target.value)}>
  <option>Canada</option>
  <option>Netherlands</option>
</NativeSelect>

It takes native <select> attributes: value, defaultValue, onChange (a DOM event), name, required, disabled. Children are <option> and <optgroup>.
label and description are wired with htmlFor and aria-describedby. Without a label, pass aria-label.
className applies to the outer wrapper, not the <select>. There is no errorMessage prop.

Example source · show

import { NativeSelect } from './native-select'

const countries = ['Australia', 'Brazil', 'Canada', 'Germany', 'Japan', 'Netherlands', 'United Kingdom', 'United States']

export const styles = {
  Outline: () => (
    <NativeSelect className="w-64" label="Country" defaultValue="Netherlands">
      {countries.map((c) => <option key={c}>{c}</option>)}
    </NativeSelect>
  ),
  Filled: () => (
    <NativeSelect className="w-64" variant="filled" label="Timezone" description="Uses your device's picker on mobile.">
      <optgroup label="Europe">
        <option>Amsterdam</option>
        <option>Berlin</option>
      </optgroup>
      <optgroup label="Americas">
        <option>New York</option>
        <option>São Paulo</option>
      </optgroup>
    </NativeSelect>
  ),
}

Source: packages/ui/src/native-select/native-select.tsx

Catalog