Input group
Grupo de entrada — uma caixa de campo em volta de um input e dos textos, ícones ou botões que fazem parte dele. PasswordInput e SearchInput são grupos prontos para os dois casos mais comuns.
Pelo menos 8 caracteres, com um número.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Coloque dentro de um Field para dar um rótulo.
import { InputGroup, InputAddon, PasswordInput, SearchInput, Input } from "@camaleo/react";Anatomia
O grupo desenha uma borda e um anel de foco só. O input de dentro perde os dele, e complementos, ícones e botões ficam nas pontas.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Pelo menos 8 caracteres, com um número.
Senha com regras ao vivo
Digite uma senha. Com o texto visível, a pessoa pega o erro de digitação antes que uma regra como "um número" recuse a senha duas vezes.
2 de 6 notas
- NF 1042 · Acme Ltda.
- NF 1045 · Acme Serviços
Busca com limpar
Digite e depois aperte o × ou Esc. Limpar dispara o onChange e devolve o foco ao input, e a contagem é anunciada com aria-live.
Aperte / em qualquer lugar da página para vir para cá.
Atalho de teclado
Aperte / fora de um campo. O shortcut só desenha a dica com o campo vazio: ligue a tecla você mesmo e declare com aria-keyshortcuts.
O endereço público da sua loja. O https:// a gente coloca.
URL com prefixo
A parte fixa fica num InputAddon, então a pessoa digita só o domínio e o valor salvo não tem "https://" para limpar.
Moeda e período
A moeda antes e o período depois dizem o que o número significa, então o rótulo pode ser curto.
Botão de copiar
Clique em Copiar. Um Button dentro do grupo divide a borda, e o novo texto é anunciado, então a pessoa sabe que funcionou.
Ícone à esquerda
O ícone ajuda a pessoa a percorrer um formulário longo, mas é decoração: marque aria-hidden e deixe o rótulo dar o nome.
Inválido
Num Field inválido o grupo inteiro fica vermelho, complemento incluído, e o erro diz o que tentar no lugar.
Em contexto
São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Configurações da loja
O que o cliente vê na página de pagamento.
Boas práticas
A pessoa digita só o que muda e não tem como errar o prefixo.
Metade esquece o "https://", a outra metade digita duas vezes.
A pessoa confere o que digitou olhando.
Dobra a digitação e ainda não mostra um erro repetido nos dois campos.
Props
PasswordInput e SearchInput recebem todas as props do Input, mais as próprias:
sm para barras de ferramentas e tabelas densas.sm para barras de ferramentas e tabelas densas.aria-keyshortcuts.O InputGroup recebe size e os atributos de uma <div>; o InputAddon, os de um <span>.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio grupo.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* complementos sem fundo, só no checkout */
.checkout [data-slot="input-group"] {
--cml-input-addon-bg: transparent;
}Acessibilidade
- O nome do botão de senha diz o que o clique faz ("Mostrar senha" / "Ocultar senha"), então ele não usa aria-pressed. O foco fica nele, e a pessoa pode alternar de volta.
- Limpar a busca devolve o foco ao input, então a pessoa já digita a próxima.
- showLabel, hideLabel e clearLabel vêm em inglês por padrão. Passe os traduzidos.
- O texto do complemento é lido com o input, a não ser que você marque aria-hidden. Esconda decoração como "https://" e deixe unidades como "/mês" legíveis.