Select

Exibe uma lista de opções para o usuário escolher, aberta por um botão.

Exemplos

Padrão

Label flutuante

Com grupos

Desabilitado

Inválido

Com texto de ajuda

Tamanho médio (md)

Com ícones

API

Select

Contém todas as partes de um select.

Propriedade	Tipo	Padrão	Descrição
defaultValue	string	-	Valor do select na primeira renderização. Use quando você não precisa controlar o estado do select.
value	string	-	Valor controlado do select. Deve ser usado junto com onValueChange.
onValueChange	(value: string) => void	-	Função chamada quando o valor muda.
defaultOpen	boolean	false	Estado de aberto do select na primeira renderização.
open	boolean	-	Estado de aberto controlado do select.
onOpenChange	(open: boolean) => void	-	Função chamada quando o estado de aberto do select muda.
disabled	boolean	false	Quando true, impede o usuário de interagir com o select.
name	string	-	Nome do select. É enviado com o formulário como parte de um par nome/valor.
required	boolean	false	Quando true, indica que o usuário precisa selecionar um valor antes de o formulário ser enviado.
invalid	boolean	false	Quando true, ativa o estilo de erro no trigger e no texto de ajuda (SelectText).
size	"md" | "lg"	"lg"	Tamanho do trigger do select. Afeta a altura, o tamanho da fonte e a escala do ícone. As opções da lista ficam um tamanho abaixo: texto de 14px e 40px de altura no lg, texto de 12px e 32px no md.

SelectTrigger

Botão que abre e fecha o select.

Propriedade	Tipo	Padrão	Descrição
asChild	boolean	false	Troca o elemento renderizado por padrão pelo que for passado como filho, combinando as props e o comportamento.
className	string	-	Classes CSS adicionais aplicadas ao trigger.

SelectValue

Parte que reflete o valor selecionado.

Propriedade	Tipo	Padrão	Descrição
placeholder	ReactNode	-	Conteúdo renderizado dentro do SelectValue quando não há value nem defaultValue definido.

SelectContent

Componente que aparece quando o select está aberto.

Propriedade	Tipo	Padrão	Descrição
position	"item-aligned" | "popper"	"popper"	Modo de posicionamento. "item-aligned" alinha o conteúdo ao trigger; "popper" posiciona como um dropdown comum.
side	"top" | "right" | "bottom" | "left"	"bottom"	Lado preferido do trigger onde o conteúdo é renderizado quando aberto. É invertido quando há colisão.
sideOffset	number	0	Distância em pixels a partir do trigger.
align	"start" | "center" | "end"	"start"	Alinhamento preferido em relação ao trigger. Pode mudar quando há colisão.
className	string	-	Classes CSS adicionais aplicadas ao conteúdo.

SelectItem

Componente que contém os itens do select.

Propriedade	Tipo	Padrão	Descrição
value	string	-	Valor enviado como dado quando o formulário é submetido com um name. Obrigatório.
disabled	boolean	false	Quando true, impede o usuário de interagir com o item.
textValue	string	-	Texto opcional usado na busca por digitação (typeahead). Por padrão, o typeahead usa o .textContent da parte SelectItemText.
icon	ReactNode	-	Elemento de ícone renderizado à esquerda do texto do item.
className	string	-	Classes CSS adicionais aplicadas ao item.

SelectGroup

Usado para agrupar vários itens.

Propriedade	Tipo	Padrão	Descrição
asChild	boolean	false	Troca o elemento renderizado por padrão pelo que for passado como filho, combinando as props e o comportamento.

SelectHeader

Usado para renderizar o cabeçalho de um grupo. Não recebe foco pelas setas do teclado.

Propriedade	Tipo	Padrão	Descrição
asChild	boolean	false	Troca o elemento renderizado por padrão pelo que for passado como filho, combinando as props e o comportamento.
className	string	-	Classes CSS adicionais aplicadas ao label.

SelectSeparator

Usado para separar visualmente os itens do select.

Propriedade	Tipo	Padrão	Descrição
asChild	boolean	false	Troca o elemento renderizado por padrão pelo que for passado como filho, combinando as props e o comportamento.
className	string	-	Classes CSS adicionais aplicadas ao separador.

SelectWrapper

Componente container necessário para o label flutuante (SelectLabel): é ele que habilita a animação do label.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais aplicadas ao wrapper.
children	ReactNode	-	Deve conter o componente Select e o SelectLabel.

SelectLabel

Componente de label flutuante que anima quando o select recebe foco ou tem valor. Deve ser usado dentro de um SelectWrapper.

Propriedade	Tipo	Padrão	Descrição
htmlFor	string	-	id do trigger do select ao qual o label está associado.
className	string	-	Classes CSS adicionais aplicadas ao label.

SelectText

Componente de texto de ajuda que exibe informações abaixo do trigger do select. Pode mostrar mensagens de erro ou texto de ajuda comum. Detecta o estado de erro automaticamente pela prop invalid do componente Select, por isso precisa ficar dentro do <Select>, depois do SelectContent. Posto fora do Select (por exemplo, como irmão dele no SelectWrapper), ele não fica com a cor de erro.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais aplicadas ao texto.
children	ReactNode	-	Texto a ser exibido. Recebe automaticamente o estilo de erro (feedback-error-foreground) quando o Select tem invalid={true}; caso contrário, aparece na cor normal (gray-foreground).