Native Select

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

1
---
2
import { NativeSelect, NativeSelectOption } from '@bejamas/ui/components/native-select';
3
---
4

5
<NativeSelect class="w-[200px]">
6
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
7
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
8
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
9
  <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
10
</NativeSelect>

Installation

bunx bejamas add native-select

npx bejamas add native-select

pnpm dlx bejamas add native-select

yarn dlx bejamas add native-select

Usage

1
---
2
import {
3
  NativeSelect,
4
  NativeSelectOption,
5
  NativeSelectOptGroup,
6
} from '@bejamas/ui/components/native-select';
7
---
8

9
<NativeSelect>
10
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
11
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
12
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
13
</NativeSelect>

Native Select vs Select

Use NativeSelect when you need standard browser form behavior — native validation, mobile-optimized pickers, and zero JavaScript. Use Select when you need a custom-styled dropdown with keyboard navigation, grouped items, and rich content.

Examples

With Groups

1
---
2
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from '@bejamas/ui/components/native-select';
3
---
4

5
<NativeSelect class="w-[200px]">
6
  <NativeSelectOptGroup label="Fruits">
7
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
8
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
9
  </NativeSelectOptGroup>
10
  <NativeSelectOptGroup label="Vegetables">
11
    <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
12
    <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
13
  </NativeSelectOptGroup>
14
</NativeSelect>

Sizes

1
---
2
import { NativeSelect, NativeSelectOption } from '@bejamas/ui/components/native-select';
3
---
4

5
<div class="flex flex-col items-start gap-4 sm:flex-row">
6
  <NativeSelect class="w-[180px]" size="sm">
7
    <NativeSelectOption value="">Small (h-8)</NativeSelectOption>
8
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
9
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
10
  </NativeSelect>
11
  <NativeSelect class="w-[180px]" size="default">
12
    <NativeSelectOption value="">Default (h-9)</NativeSelectOption>
13
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
14
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
15
  </NativeSelect>
16
  <NativeSelect class="w-[180px]" size="lg">
17
    <NativeSelectOption value="">Large (h-10)</NativeSelectOption>
18
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
19
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
20
  </NativeSelect>
21
</div>

Disabled

1
---
2
import { NativeSelect, NativeSelectOption } from '@bejamas/ui/components/native-select';
3
---
4

5
<NativeSelect disabled class="w-[200px]">
6
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
7
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
8
</NativeSelect>

Invalid

1
---
2
import { NativeSelect, NativeSelectOption } from '@bejamas/ui/components/native-select';
3
---
4

5
<NativeSelect aria-invalid="true" class="w-[200px]">
6
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
7
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
8
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
9
</NativeSelect>