Skip to content
Spira
Forms

Select

A themed dropdown for choosing one option.

Single select

A themed dropdown built on the Base UI Select.

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

const fruits = [
  { label: "Gala", value: "gala" },
  { label: "Fuji", value: "fuji" },
  { label: "Pink Lady", value: "pink-lady" },
];

<Select items={fruits}>
  <SelectTrigger>
    <SelectValue placeholder="Pick an apple" />
  </SelectTrigger>
  <SelectContent>
    {fruits.map((fruit) => (
      <SelectItem key={fruit.value} value={fruit.value}>
        {fruit.label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>