Components•Select
Components•Select
Select
A compact option picker for short lists where search is unnecessary.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/primitive-selectHow to use
import { BjorkSelect } from "@/components/bjork-ui/primitives";Props
classNamestringPass through styling hooks for the Select primitive without replacing the base Bjork surface.
childrenReactNodeComposable content, labels, icons, and nested content where the primitive supports them.
variant"default" | "quiet" | "inset" | "ghost"Match the select trigger and dropdown surface to the same visual variants used by Bjork inputs.
Default select
Use for the standard raised Bjork field surface.
<BjorkSelect variant="default" />Inset select
Use inside framed regions where the trigger should read as recessed.
<BjorkSelect variant="inset" />Ghost select
Use where the control needs to stay quiet until hover or focus.
<BjorkSelect variant="ghost" />