Skip to content
FelicityUI

Native Select

A styled native HTML select element with consistent design system integration.

Installation

terminal
npx felicityui add native-select --platform react

Usage

example.tsx
import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select"

<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

Composition

NativeSelect
├── NativeSelectOption
└── NativeSelectOptGroup
    └── NativeSelectOption

Default

Groups

NativeSelectOptGroup organizes options.

Disabled

Invalid

error / invalid set aria-invalid and data-invalid.

RTL

dir=rtl

API Reference

PropTypeDefaultDescription
labelReactNode—Optional field label.
descriptionReactNode—Helper text below the control.
errorReactNode—Error message; sets invalid styling.
invalidboolean—Marks invalid without requiring error text.
disabledboolean—Disables the select.
NativeSelectOptGroup.labelstring—Group label (native optgroup label).

Accessibility

WCAG 2.2 AA

  • Native select semantics and keyboard support.
  • Label association when field chrome is used.
  • aria-invalid and role=alert for errors.
  • Visible focus-visible ring.

Platform notes

React

Native HTML <select> with Felicity tokens and chevron. Prefer Select for a custom listbox — not Base UI / Radix runtime.

  • Server Component compatible.
  • Uses data-slot=native-select|native-select-option|native-select-optgroup.
  • Optional field chrome via label/description/error.
  • aria-invalid when invalid or error is set.