Native Select

A styled native browser select element for simple, accessible option selection.

Choose your favourite fruit.

Installation

pnpm dlx stera-ui add native-select

Usage

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select"
<NativeSelect>
  <NativeSelectOption value="">Select an option</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelect>

With Field

Choose your favourite fruit.

<Field>
  <FieldLabel htmlFor="fruit">Fruit</FieldLabel>
  <NativeSelect id="fruit" className="w-full">
    <NativeSelectOption value="">Select a fruit</NativeSelectOption>
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
  </NativeSelect>
  <FieldDescription>Choose your favourite fruit.</FieldDescription>
</Field>

With Option Groups

Use NativeSelectOptGroup to group related options with a label.

<NativeSelect>
  <NativeSelectOption value="">Select a country</NativeSelectOption>
  <NativeSelectOptGroup label="North America">
    <NativeSelectOption value="us">United States</NativeSelectOption>
    <NativeSelectOption value="ca">Canada</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Europe">
    <NativeSelectOption value="gb">United Kingdom</NativeSelectOption>
    <NativeSelectOption value="de">Germany</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Sizes

sm
md
lg
xl
SizeDescription
smSmall
mdMedium (default)
lgLarge
xlExtra large

Disabled

Contact your administrator to change your role.

<Field data-disabled="true">
  <FieldLabel htmlFor="role">Role</FieldLabel>
  <NativeSelect id="role" disabled>
    <NativeSelectOption value="admin">Admin</NativeSelectOption>
  </NativeSelect>
</Field>

API Reference

NativeSelect

Renders a <select> inside a positioned wrapper that includes a chevron icon. Accepts all standard <select> props except size.

PropTypeDefault
size"sm" | "md" | "lg" | "xl""md"

NativeSelectOption

Renders an <option> element. Accepts all standard <option> props.

NativeSelectOptGroup

Renders an <optgroup> element. Accepts all standard <optgroup> props.