Delphi Design

A select component for single-choice selections.

Default

Placeholder

With Selection

Usage

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@delphi/ui";

export function Example() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Choose..." />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="a">Option A</SelectItem>
        <SelectItem value="b">Option B</SelectItem>
      </SelectContent>
    </Select>
  );
}

API Reference

Prop	Type	Default	Description
`value`	`string`	-	Controlled value
`defaultValue`	`string`	-	Default selected value
`onValueChange`	`(value: string) => void`	-	Called when selection changes
`disabled`	`boolean`	`false`	Disables the select
`placeholder`	`string`	-	Placeholder text when no selection

Use a clear placeholder that indicates what type of selection is expected

Order options logically — alphabetically, by frequency, or by importance

Keep option labels concise but descriptive

Use aria-label or associate with a visible label

Consider a searchable combobox for lists with 10+ options

Use selects for fewer than 5 options — use radio buttons instead

Include a blank "Please select" option — use placeholder prop instead

Nest selects inside other selects

Auto-submit forms when selection changes without warning the user