BlankUI

form

Select

A dropdown for picking one option from a list. Put it inside a Field for the label and errors.

npx blankui add select
Raw markdown for agentsRegistry JSON

When to use

  • Picking one option from a list of about 4 to 20 items.

Use something else when

  • Picking several options. Use checkbox.
  • The list has only 2 or 3 options that should all be visible. Use checkbox.
  • Showing a menu of actions. Use popover.

Built on Radix. Use value and onValueChange (or defaultValue). Item values must be non-empty strings.

Import

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

Example

<Field label="Role">
  <Select value={role} onValueChange={setRole}>
    <SelectTrigger>
      <SelectValue placeholder="Pick a role" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="admin">Admin</SelectItem>
      <SelectItem value="member">Member</SelectItem>
      <SelectItem value="viewer">Viewer</SelectItem>
    </SelectContent>
  </Select>
</Field>

Groups

<SelectContent>
  <SelectGroup>
    <SelectLabel>Fruits</SelectLabel>
    <SelectItem value="apple">Apple</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>Vegetables</SelectLabel>
    <SelectItem value="carrot">Carrot</SelectItem>
  </SelectGroup>
</SelectContent>

Pass name to Select to include the value in a native form submit.

Mistakes to avoid

AvoidInstead
<select><option>...</option></select> (a raw select element)<Select> with SelectTrigger, SelectValue, SelectContent and SelectItem
onChange={(e) => setValue(e.target.value)}onValueChange={setValue}
<SelectItem value="">None</SelectItem>Leave the Select empty and use the SelectValue placeholder

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/select.json