Componentes
Input
Papel com anel fino. Foco vira azul com halo de 4px. Erro diz o que fazer, com ícone e aria.
Exemplos#
Falta o domínio. Ex.: financeiro@aurora.com.br
Rótulo · busca com ícone · erro com instrução
Tamanhos acompanham o botão · sm 32 · md 40 · lg 48
Em reais. Centavos depois da vírgula.
Dica
Importar#
import { Input, Label, Field, fieldFrame } from "@hiboupay/react";
import type { InputProps, FieldSize } from "@hiboupay/react";Quando usar#
Use quando
- Texto curto de uma linha: nome, e-mail, valor, busca.
- Busca em barra com leading de ícone.
Não use quando
- Texto longo: Textarea.
- Escolha de lista fechada: Select ou FilterChip.
Variantes#
sm · 32
Barras densas.
md · 40
Padrão.
lg · 48
Formulário de destaque, celular.
Anatomia#
- 01Label (hb-label) opcional acima
- 02Campo com anel interno
- 03leading / trailing opcionais
- 04Mensagem: dica ou erro com ícone
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | Rótulo visível, ligado por htmlFor. | |
| hint | string | Dica abaixo, ligada por aria-describedby. | |
| error | string | Mensagem de erro. Liga aria-invalid e substitui a dica. | |
| size | "sm" | "md" | "lg" | "md" | 32 · 40 · 48. Acompanhe o botão ao lado. |
| leading | ReactNode | Ícone à esquerda (decorativo). | |
| trailing | ReactNode | Ícone ou ação à direita. | |
| ...props | InputHTMLAttributes | Atributos nativos. ref é encaminhado; id é gerado se ausente. |
Acessibilidade#
Teclado
Leitor de tela
- —Label associado por id.
- —Erro e dica anunciados por aria-describedby.
- —aria-invalid quando há erro.
Boas práticas#
Faça
- Rótulo sempre visível.
- Erro com instrução e exemplo.
Evite
- Placeholder como rótulo.
- Erro só em cor.
Conteúdo#
- —Rótulo substantivo curto: "E-mail do decisor".
- —Placeholder é exemplo: "nome@empresa.com".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Entrada
Select
Campo nativo. Mesmo anel e a mesma altura do Input, com a seta Graffiti do campo. O menu aberto é o do sistema.
Entrada
Textarea
Campo de várias linhas. Mesmo anel do Input. Mínimo de 96px, cresce na vertical.
Entrada
FilterChip
Chip de filtro: rótulo + valor, popover de vidro. Ativo vira papel com anel azul e ganha X para limpar.
Entrada
Checkbox
A mesma marca do FilterChip: papel com anel fino, azul preenchido com check branco. Independente ou em lote. Traço quando só alguns filhos estão marcados.
Entrada
FileUpload
Zona rebaixada, anel tracejado, coruja vigiando. No arraste ela trabalha. Arquivo vira linha de papel com tamanho mono e X. Sem nuvem genérica.