Select

Selects one option from an overlay. The closed trigger carries a chevron.

Preview

In action

Face

The only face

Inter, or Inter. Weight and size do the rest.

When to use

Use it for

One choice from a list of five or more when the labels are short.
Lists that benefit from type-ahead and a consistent overlay across platforms.

Not for

Free text or filtering; use Combobox.
Native form posts and phones where the platform picker is better; use NativeSelect.

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 { Select } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add 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/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 { useState } from "react";
import { Select } from "@noorddev/vlak-react";

const [city, setCity] = useState("alkmaar");

<Select
  aria-label="City"
  options={[
    { value: "alkmaar", label: "Alkmaar" },
    { value: "amsterdam", label: "Amsterdam" },
    { value: "rotterdam", label: "Rotterdam" },
  ]}
  value={city}
  onValueChange={setCity}
/>

Props

Select

Select-only combobox: the trigger holds focus and points at the active option with aria-activedescendant; the listbox overlays.

Prop	Type	Default
`options`required	`SelectOption[]`
`value`	`string`
`defaultValue`	`string`
`placeholder`	`ReactNode`	`"Select…"`
`onValueChange`	`(value: string) => void`
`disabled`	`boolean`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">.

Keyboard

Keys	Does
`Arrow down, Arrow up, Enter, Space`	Opens the list on the selected option
`Home, End`	Opens on the first or last option; moves there when open
`Type letters`	Jumps to the next matching option, open or closed
`Arrow down, Arrow up`	Moves the active option
`Page up, Page down`	Moves ten options
`Enter, Space`	Selects the active option and closes
`Escape`	Closes and returns focus to the trigger
`Tab`	Closes and moves on

Accessibility

APG select-only combobox: the trigger is a <button role="combobox"> with aria-haspopup="listbox", aria-expanded, aria-controls, and aria-activedescendant.
The list is role="listbox" with role="option" rows carrying aria-selected; focus stays on the trigger.
Pass aria-label or aria-labelledby; the listbox is labelled by the same source.
Controlled with value and onValueChange, or uncontrolled with defaultValue. A click outside closes it.

Markup

<button class="rs-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="true"><span>Alkmaar</span></button>
<div class="rs-menu rs-select-list" role="listbox"><div class="rs-menu-item rs-menu-item-active" role="option" aria-selected="true">Alkmaar</div><div class="rs-menu-item" role="option" aria-selected="false">Amsterdam</div></div>

Classes

.rs-select.rs-select-list

Depends on

/dropdown-menu