Select
StableCampo de seleção com trigger, popup em listbox, grupos, rótulos e separadores. Composto sobre Base UI Select; a escolha é reportada pelo rótulo do item, não pelo valor bruto.
Instalação
npx up-web-ds add selectGera check, chevron-down, chevron-up para a biblioteca de ícones do projeto (components.json → iconLibrary).
Preview
Default
With Value
Grouped
Sizes
Disabled
With Disabled Item
Invalid
Scrollable
All states
Default
With Value
Grouped
Sizes
Disabled
With Disabled Item
Invalid
Scrollable
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- selection
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / select
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: ArrowDown abre e percorre a lista, ArrowUp volta, Enter escolhe o item destacado, Escape desiste sem alterar o valor, e o foco retorna ao trigger nos dois desfechos. Um select desabilitado sai da ordem de tabulação, e um item desabilitado continua anunciado sem poder ser escolhido. Leitor de tela verificado em navegador: o trigger é um combobox nomeado pelo rótulo do campo, aria-expanded acompanha o estado, o popup portalizado é ligado por aria-controls e expõe options com a seleção atual marcada; a escolha é reportada pelo rótulo do item, não pelo valor bruto, e aria-invalid é exposto sem trocar o papel do controle. Touch verificado em viewport de 375px com emulação de toque: o trigger e cada opção medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, e abrir e escolher funcionam por toque. Reduced motion verificado com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a animação de entrada do popup mede 0.001s, sem perder a abertura nem a escolha.
Dependências
- Pacotes
- Nenhuma
- Ícones
- check, chevron-down, chevron-up
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda