Components

Native Select

Native <select> with an ink border, chevron and 44px height; invalid is a 2px ink underline.

Section

Install

bash

npx shadcn add @eloquent/native-select

Usage

tsx

import { Label } from "@/components/ui/label";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";

<Label htmlFor="section">Section</Label>
<NativeSelect id="section" defaultValue="business">
  <NativeSelectOption value="world">World</NativeSelectOption>
  <NativeSelectOption value="business">Business</NativeSelectOption>
</NativeSelect>

Use Select when the list needs custom styling or an ink check on the chosen item.

States

Default

Disabled

Edition

Choose an edition to continue.

State	Treatment
Default	1px ink border, paper fill, ink chevron, 44px high
Press	`tint-1` fill. No hover effect
Focus	2px ink outline, 2px offset
Invalid	2px ink underline, with `FieldError` giving the ink icon and message
Disabled	Halftone text, border and chevron, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to and from the select (disabled selects are skipped)
Arrow Up / Down	Change the option, or move through the open list
Enter / Space / Alt+Arrow Down	Open the list (browser behaviour)
Letters	Jump to the matching option (typeahead)
Esc	Close the list

Vietnamese

Chuyên mục

Ink adaptation

The frame matches the Select trigger: 1px ink border, no radius, no shadow, no fill. The open list is drawn by the browser and cannot be restyled, so it follows the system theme; choose Select when that matters. Upstream's size="sm" is dropped to keep a 44px hit target. Built on the native <select>; there is no Base UI part.