Native select

Presents browser-native options inside a 1px control border.

Preview

In action

City

Where the desk is

The platform list. Vlak chrome.

Studio city

When to use

Use it for

A short fixed list where the platform picker is fine, especially on phones.
Forms that post natively; the value travels with the form.

Not for

Rich option labels or type-ahead over long lists; use Select or Combobox.
Fewer than three options; use Radio.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { NativeSelect } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/native-select.

2. Vendor the source

npx @noorddev/vlak-cli add native-select

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/native-select.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { NativeSelect } from "@noorddev/vlak-react";

<NativeSelect label="City" defaultValue="alkmaar">
  <option value="alkmaar">Alkmaar</option>
  <option value="amsterdam">Amsterdam</option>
  <option value="rotterdam">Rotterdam</option>
</NativeSelect>

Props

NativeSelect

The platform list. Vlak chrome.

Prop	Type	Default	Description
`label`	`ReactNode`

Also accepts SelectHTMLAttributes<HTMLSelectElement>.

Keyboard

Keys	Does
`Space, Alt + Arrow down`	Opens the platform list
`Arrow up, Arrow down`	Changes the value
`Type a letter`	Jumps to a matching option

Accessibility

Renders a native <select> with a generated id; label renders a <label> pointing at it.
Inside Field, hint and error reach it through aria-describedby and aria-invalid.

Markup

<select class="rs-native-select"><option>Alkmaar</option><option>Amsterdam</option><option>Rotterdam</option></select>

Classes

.rs-native-select.rs-native-select-invalid.rs-native-select-field.rs-native-select-label