Select
Lista suspensa para escolher uma opção, ou algumas, de uma lista que fica fechada até ser necessária. O popup acompanha o estilo pelo portal e abre pelo teclado tanto quanto pelo mouse.
Instalação
Configure o Camaleo uma vez (Instalação) e importe as partes que precisar; para listas longas, some SelectGroup, SelectGroupLabel e SelectSeparator. O estilo carregado cuida do gatilho e do popup.
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@camaleo/react";Anatomia
O Select guarda o estado; o gatilho mostra o valor; o conteúdo é um popup renderizado num portal. Cada parte tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Com placeholder
Deixe o defaultValue de fora quando a escolha for da pessoa; o placeholder do SelectValue diz o que escolher sem fingir que já é um valor.
Grupos e separadores
Passando de umas oito opções, SelectGroup com SelectGroupLabel deixa a pessoa pular para a seção certa em vez de ler linha por linha.
Alinhado ao gatilho
O alignItemWithTrigger abre a lista sobre o gatilho com a opção atual no lugar, e listas curtas ficam com cara de menu nativo.
Chega entre 10/11 e 14/11 · R$ 19,90
Controlado
Escolha outra opção. Com value e onValueChange o resto do formulário reage, aqui o prazo e o preço abaixo do campo.
Vários valores
O multiple mantém a lista aberta e devolve um array; passe uma função ao SelectValue para o gatilho mostrar "Seg, Qua, Sex" em vez de um número.
O GG volta em 20/11.
Opções indisponíveis
Desative a opção em vez de removê-la, para a pessoa saber que ela existe, e diga quando volta.
Obrigatório, com erro
Dentro de um Field, o rótulo dá nome ao gatilho e o FieldError é lido junto; diga o que fazer, não só que está errado.
Em contexto
Um select quase nunca aparece sozinho. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Filtros
1–25 de 312
Boas práticas
O rótulo continua lá depois da escolha, então a pessoa sempre sabe que campo é aquele.
Escolhido um valor, "País" some e o campo fica sem nome na tela.
Radio custa um clique e não esconde nada.
São dois cliques para ver uma escolha que caberia numa linha.
Props
Estas são as props do SelectContent. O Select recebe as props da raiz do Base UI: items (um objeto ou { label, value }[], para o gatilho mostrar o rótulo antes de o popup abrir), value, defaultValue, onValueChange, multiple, disabled, required, readOnly, name e open / onOpenChange. O SelectItem recebe value e disabled; o SelectValue recebe placeholder ou uma função do valor como children.
Styling hooks
Mude o visual sem fazer fork: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio select.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- Dentro de um Field, o FieldLabel dá nome ao gatilho e o FieldDescription / FieldError são lidos em seguida.
- O gatilho informa aria-expanded e as opções têm aria-selected, então o leitor de tela anuncia o estado.
- O popup vai para um portal mas mantém o estilo pelo PortalScope, e o contraste passa no WCAG 2.2 AA nos 13 estilos.
- Para listas muito longas ou no celular, o NativeSelect usa o seletor do próprio sistema.