Primitives

Select

Native select wrapped in the BR input shell. 36px tall, hairline border, focus accent halo. Use for short option lists; reach for the shadcn Combobox for search + async.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

Engagement type

Currency

Billing cycle

Affects invoice date generation.

Status

Required before publishing.

import { Field, Select } from "@/components/br/primitives";

<Field label="Engagement type">
  <Select value={engagement} onChange={(e) => setEngagement(e.target.value)}>
    <option value="fractional">Fractional CTO — 2 days / week</option>
    <option value="advisor">Advisor — 4 hours / month</option>
    <option value="project">Project — fixed scope</option>
  </Select>
</Field>

{/* Uncontrolled */}
<Field label="Currency">
  <Select defaultValue="eur">
    <option value="eur">EUR — Euro</option>
    <option value="usd">USD — US Dollar</option>
  </Select>
</Field>

Props

Prop	Type	Default	Description
value	string	—	Controlled value.
defaultValue	string	—	Uncontrolled default.
onChange	React.ChangeEvent<HTMLSelectElement>	—	Native change handler — read e.target.value.
disabled	boolean	—	Dims and blocks interaction.
children	ReactNode	—	<option> / <optgroup> elements.

Notes

For long lists with search, async loading, or multi-select — use the shadcn Select (Radix) or Command as a combobox. The BR primitive wraps the native <select> for minimal-dependency, form-friendly cases.