Componentes
Input
betaCampo de texto de uma linha. O type nativo continua valendo — o componente não reimplementa teclado numérico, e-mail ou senha.
Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/input
Orientação
Campo de texto de uma linha. O type nativo continua valendo: o componente não reimplementa teclado numérico, e-mail ou senha, ele só veste.
Quando usar
- A resposta cabe em uma linha: nome, e-mail, código, valor.
- Você precisa do teclado certo no celular —
type="email",inputMode="numeric"e companhia fazem esse trabalho. - O campo precisa de prefixo, sufixo ou botão colado: componha com Input Group em vez de desenhar a borda à mão.
Quando não usar
- Para resposta longa. A altura do Textarea é a promessa que o campo faz sobre o tamanho esperado.
- Para escolher entre opções conhecidas — Select, Native Select ou Combobox, conforme o tamanho da lista.
- Para código de confirmação recebido por outro canal: Input OTP separa as casas e o usuário não se perde.
Playground
<Input aria-label="Nome do aluno" placeholder="Nome do aluno" />Uso
Um campo de texto de uma linha. Para respostas longas ou dissertativas, use Textarea.
Tipos
O `type` nativo do HTML continua valendo — o componente não reimplementa teclado numérico, e-mail ou senha.
Com valor preenchido
Use `defaultValue` para mostrar um campo já respondido, sem estado.
Arquivo
`type="file"` herda o mesmo tratamento visual — o rótulo do arquivo usa a mesma tipografia do texto do botão.
Inválido
`aria-invalid` marca o erro visualmente e para o leitor de tela ao mesmo tempo — não separe as duas coisas.
Desabilitado
Desabilitado baixa a opacidade e bloqueia o cursor, mas mantém o valor visível — o dado não some.
Obrigatório
`required` é atributo nativo do HTML — valida antes do envio, sem JavaScript. Combine com `FieldLabel` para marcar o asterisco.
Em um Field
`Field` liga rótulo, campo e ajuda. Use `FieldDescription` para instrução, não para erro — erro é `FieldError`.
Usamos para avisos de frequência e boletim.
Em um grupo de campos
`FieldGroup` empilha vários `Field` com o espaçamento certo entre eles — não use `flex flex-col gap-*` manual para isso.
Dentro de um InputGroup
Troque `Input` por `InputGroupInput` quando o campo precisa de adorno — ícone, texto fixo, botão. Veja InputGroup para a composição completa.
Dentro de um ButtonGroup
`ButtonGroup` funde as bordas de um `Input` com um `Button` vizinho — o input ocupa o espaço que sobra, o botão fica do tamanho do rótulo.
Em um formulário completo
Um formulário curto: `FieldGroup` organiza os `Field`, cada um com rótulo e ajuda. O envio fica fora do grupo, como ação da tela.
Acessibilidade
O que o componente já garante, e o que continua sendo responsabilidade da tela.
- Sempre dentro de um Field, com
FieldLabel htmlForapontando para oid. Placeholder não é rótulo: some quando o usuário digita. - O estado de erro precisa de texto, não só de borda vermelha — cor sozinha não é informação.
- Campo obrigatório: marque com
requiredde verdade, para que a obrigatoriedade seja anunciada e não apenas desenhada com asterisco.
Em contexto de produto
Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.
Os campos de e-mail e senha do login são Input dentro de Field, com o tipo nativo fazendo o trabalho de teclado no celular.
Ver o bloco de autenticaçãoComponentes relacionados
Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
Input não tem props próprias — aceita apenas as props herdadas, incluindo className e os atributos de DOM.
Origem do dado
- Orientação, acessibilidade e relacionados: documentação
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css