Componentes

Select

Lista dropdown de opções exclusivas.

Campos e formulários

Carregando demonstração…

Código da demo
"use client";

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

export function Demo() {
  return (
    <div className="grid w-full max-w-xs gap-fe-2">
      <Label htmlFor="fruit">Fruta</Label>
      <Select defaultValue="apple">
        <SelectTrigger id="fruit">
          <SelectValue placeholder="Escolha" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Maçã</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="orange">Laranja</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

Use

  • Lista fechada de 5 a 15 opções.
  • Um valor padrão sensato, quando existir.

Não use

  • Menos de 5 opções: use RadioGroup ou ToggleGroup.
  • Mais de 15 ou com busca: use Combobox.
Acessibilidade
Label associado; teclado setas; Esc fecha.
Importar
import { Select, SelectTrigger, SelectContent, SelectItem } from "@financeequity/ui/select"

Neste repositório:

import { Select, SelectTrigger, SelectContent, SelectItem } from "@/components/ui/select"
Dependências
radix-ui