Input Group
StableUm campo só feito de vários elementos: a borda, o anel de foco e o estado inválido pertencem ao invólucro, e o controle dentro abre mão dos três. A pessoa vê uma caixa, e o anel cerca a caixa em vez de cercar o input. O invólucro é um div e não nomeia nada, então quem carrega o rótulo continua sendo o controle. Compõe Input, Textarea e Button do Up Web DS.
Instalação
npx up-web-ds add input-groupPreview
Default
With Text
With Button
With Textarea
Invalid
Já existe um item com esse nome. Use npm run ds:compare em vez de criar um duplicado.
All states
Default
With Text
With Button
With Textarea
Invalid
Já existe um item com esse nome. Use npm run ds:compare em vez de criar um duplicado.
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- input
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / input-group
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: com addons de texto o campo custa um Tab stop, e com um botão dentro dele custa dois — que é a contagem honesta, já que ali existem mesmo dois controles. Leitor de tela verificado por teste: o invólucro não declara papel algum, o nome acessível vem do controle e não do prefixo — "ms" é um fato sobre a resposta, não parte da pergunta —, e aria-invalid vive no controle, de onde o invólucro o lê para desenhar a borda, de modo que os dois nunca discordam. Touch verificado em navegador com emulação de toque em viewport de 375px: o campo tem 36px de altura, os botões internos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, e o alinhamento block transforma a linha em pilha para o textarea em vez de espremer uma coluna ao lado. Reduced motion verificado com prefers-reduced-motion: reduce — a transição de cor e de anel do invólucro colapsa para 1ms.
Dependências
- Pacotes
- class-variance-authority
- Ícones
- Nenhum
- Usado por
- Combobox