Components

Select

A dropdown select component built on Radix UI with density-aware sizing, grouped options, and accessible keyboard navigation.

Preview

Installation

npx blackboard-ui@latest add select

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export default function Example() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="option-1">Option 1</SelectItem>
          <SelectItem value="option-2">Option 2</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

Examples

Sizes

Use the size prop on SelectTrigger to control the height, padding, and font size.

<SelectTrigger size="sm">...</SelectTrigger>
<SelectTrigger>...</SelectTrigger>
<SelectTrigger size="lg">...</SelectTrigger>

With Label

Pair with Field, FieldLabel, and FieldDescription for accessible form fields.

Framework

Choose the framework for your new project.

<Field>
  <FieldLabel htmlFor="framework">Framework</FieldLabel>
  <Select>
    <SelectTrigger id="framework">
      <SelectValue placeholder="Select a framework" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectItem value="next">Next.js</SelectItem>
        <SelectItem value="remix">Remix</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
  <FieldDescription>Choose the framework for your new project.</FieldDescription>
</Field>

Groups

Use SelectGroup and SelectLabel to organize options into labeled sections.

<SelectContent>
  <SelectGroup>
    <SelectLabel>Tropical</SelectLabel>
    <SelectItem value="mango">Mango</SelectItem>
    <SelectItem value="pineapple">Pineapple</SelectItem>
  </SelectGroup>
  <SelectGroup>
    <SelectLabel>Berries</SelectLabel>
    <SelectItem value="strawberry">Strawberry</SelectItem>
    <SelectItem value="blueberry">Blueberry</SelectItem>
  </SelectGroup>
</SelectContent>

Disabled

Use the disabled prop on Select to disable the entire select.

<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  ...
</Select>

API Reference

SelectTrigger

Prop	Type	Default
size	"default" \| "sm" \| "lg"	"default"
className	string	—

Select

Prop	Type	Default
defaultValue	string	—
value	string	—
onValueChange	(value: string) => void	—
disabled	boolean	false

Built on @radix-ui/react-select. See the Radix docs for the full API.