City
Where the desk is
The platform list. Vlak chrome.
Native select
Presents browser-native options inside a 1px control border.
Preview
In action
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/ with its dependencies, 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
<div class="rs-native-select-control"><select class="rs-native-select" aria-label="City"><option>Alkmaar</option><option>Amsterdam</option><option>Rotterdam</option></select><svg class="rs-native-select-icon rs-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" aria-hidden="true"><path d="M5.5 3.75 L10.5 8.25 L5.5 12.75" transform="rotate(90 8 8)" vector-effect="non-scaling-stroke" /></svg></div>
Classes
.rs-native-select.rs-native-select-invalid.rs-native-select-field.rs-native-select-label.rs-native-select-control.rs-native-select-icon