Field
Campo que envolve um controle de formulário com rótulo, descrição e erro, liga tudo para as tecnologias assistivas e acompanha a validade. Vem com Input, Textarea, Label e Fieldset.
Enviamos notas fiscais e links de acesso para cá.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar.
import { Field, FieldLabel, FieldDescription, FieldError } from "@camaleo/react";import { Input, Textarea, Label, Fieldset, FieldsetLegend } from "@camaleo/react";Anatomia
Um Field é uma grade com até quatro partes. O rótulo aponta para o controle, e a descrição e o erro são lidos junto com ele.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Como está no seu documento. Ele sai na nota fiscal.
0 / 160 caracteres
Textarea com contador
Digite. Uma contagem ao vivo no FieldDescription é lida com o campo, então a pessoa ouve o limite antes de chegar nele.
Obrigatório
Digite uma letra, apague e saia. O valueMissing espera o campo ser alterado ou o formulário ser enviado, então um formulário novo nunca abre em vermelho.
Erro vindo do servidor
Quando o erro vem da sua API, use invalid e renderize FieldError match. O input recebe aria-invalid e a mensagem fica ligada a ele.
Letras minúsculas, números, pontos e sublinhados.
Validação própria
Digite um espaço ou apague letras. O validate devolve a mensagem, e um FieldError vazio mostra ela enquanto a pessoa digita.
Só quem é dono do workspace pode mudar.
Desativado
O disabled no Field chega ao rótulo e ao controle. Diga o motivo na descrição, senão ninguém sabe quem pode mudar.
Agrupado com fieldset
Fieldset e FieldsetLegend dão nome ao grupo, então "Nome" é anunciado como parte de "Contato de emergência".
Rótulo fora de um field
Para checkbox ou switch, envolva com Label: a linha inteira fica clicável e dá nome ao controle.
Tipos de input
O type e o autoComplete certos abrem o teclado adequado no celular e deixam o navegador preencher o valor.
Em contexto
Campos vivem em formulários. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Perfil público
Aparece no seu perfil e ao lado dos seus comentários.
Boas práticas
Enviamos notas fiscais e links de acesso para cá.
Ele fica no lugar enquanto a pessoa digita, e o placeholder fica livre para mostrar um exemplo.
Ele some na primeira tecla, e o contraste baixo dificulta a leitura.
O erro diz a regra, então a pessoa sabe o que digitar.
"Entrada inválida." avisa que algo está errado, mas não o que mudar.
Props
O Field recebe as props da raiz de field do Base UI. Estas são as mais usadas:
name do controle.validate e as regras nativas rodam.validate no modo onChange.O FieldError recebe match: true para mostrar sempre, uma chave de ValidityState como "valueMissing" para mostrar só nesse erro, ou nada para mostrar sempre que o campo estiver inválido. O Fieldset recebe disabled. Input e Textarea recebem os atributos de <input> e <textarea>; o Label, os de <label>.
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 campo.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* formulário mais compacto, só neste diálogo */
.quick-add [data-slot="field"] {
--cml-field-gap: 0.25rem;
}Acessibilidade
- O FieldLabel é um <label> de verdade ligado ao controle, então o texto dele é o nome acessível do controle.
- O FieldDescription e um FieldError visível entram no aria-describedby, então o leitor de tela lê os dois depois do nome.
- Um campo inválido marca aria-invalid no controle. A cor nunca é o único sinal: a mensagem de erro é sempre texto.
- O FieldsetLegend dá nome ao grupo, e a legenda é anunciada quando o foco entra nele.