Native Select

Installation

pnpm dlx saastro add native-select

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add native-select --yes

pnpm add tailwind-variants

Usage

---
import { NativeSelect, NativeSelectOption } from "@/components/ui-saastro/native-select"
---

<NativeSelect>
  <NativeSelectOption value="" disabled selected>Select an option</NativeSelectOption>
  <NativeSelectOption value="1">Option 1</NativeSelectOption>
  <NativeSelectOption value="2">Option 2</NativeSelectOption>
  <NativeSelectOption value="3">Option 3</NativeSelectOption>
</NativeSelect>

Examples

Small Size

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

With Optgroup

---
import { NativeSelect, NativeSelectOption, NativeSelectOptgroup } from "@/components/ui-saastro/native-select"
---

<NativeSelect>
  <NativeSelectOptgroup label="Fruits">
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
  </NativeSelectOptgroup>
  <NativeSelectOptgroup label="Vegetables">
    <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
    <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
  </NativeSelectOptgroup>
</NativeSelect>

Props

NativeSelect

Accessibility

• Uses native <select> element for built-in accessibility
• Supports keyboard navigation
• Works with screen readers without additional configuration