Select

Select é um dropdown compacto construído sobre @radix-ui/react-select. Use quando há mais de cinco opções e você quer economizar espaço vertical — caso contrário, prefira RadioGroup.

'use client';

import {
  Label,
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from '@uranus-workspace/design-system';

export default function SelectDefault() {
  return (
    <div className="grid w-full max-w-xs gap-2">
      <Label htmlFor="timezone">Fuso horário</Label>
      <Select>
        <SelectTrigger id="timezone">
          <SelectValue placeholder="Selecione um fuso" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Américas</SelectLabel>
            <SelectItem value="sao_paulo">São Paulo (GMT-3)</SelectItem>
            <SelectItem value="new_york">Nova York (GMT-5)</SelectItem>
            <SelectItem value="los_angeles">Los Angeles (GMT-8)</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Europa</SelectLabel>
            <SelectItem value="lisbon">Lisboa (GMT+0)</SelectItem>
            <SelectItem value="berlin">Berlim (GMT+1)</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}

Anatomia

• Select — a raiz que gerencia o estado aberto/fechado e o valor.
• SelectTrigger — o botão que o usuário clica. Recebe um id para emparelhar com o Label.
• SelectValue — renderiza o valor selecionado ou o placeholder.
• SelectContent — o popover com a lista. Renderizado num portal.
• SelectGroup + SelectLabel — agrupamentos opcionais para listas grandes.
• SelectItem — cada opção, identificada por value.
• SelectSeparator — uma linha divisória entre grupos.

Uso

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@uranus-workspace/design-system';

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Selecione" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="sp">São Paulo</SelectItem>
    <SelectItem value="rj">Rio de Janeiro</SelectItem>
  </SelectContent>
</Select>

Este componente precisa rodar no cliente — coloque 'use client' no topo do arquivo que o consome.

Faça

• Forneça sempre um placeholder no SelectValue quando não há valor padrão.
• Associe um Label ao SelectTrigger via htmlFor + id.
• Agrupe opções relacionadas com SelectGroup + SelectLabel quando a lista passar de oito itens.

Não faça

• Não use Select para escolhas binárias — prefira Switch ou Checkbox.
• Não recrie um Select com DropdownMenu; o menu não expõe a semântica de listbox.
• Não deixe o SelectTrigger sem rótulo visível.

Acessibilidade

• Teclado: Espaço/Enter abre, setas navegam, Esc fecha, letras iniciam busca incremental.
• O componente expõe role="combobox" no trigger e role="listbox" no conteúdo, com aria-expanded e aria-activedescendant gerenciados automaticamente.
• Rotule sempre o trigger — sem rótulo acessível, o campo é inutilizável com leitores de tela.