TextInput
Um campo de uma linha para texto curto: um nome, um e-mail, um código.
Nesta página
Playground
Estado
Fundo
<div class="feitio-field"><label class="feitio-label" for="pg-t">Nome do lembrete</label><input class="feitio-input" id="pg-t" value="Regar as plantas"></div>Quando usar
- Para respostas que cabem numa linha e que a pessoa precisa digitar.
Quando não usar
- Texto longo: Textarea.
- Horário: TimeInput.
- Opções conhecidas: Radios ou Select.
Exemplos
Código
CEP
Cidade
Assunto do lembrete
Larguras
A largura conta os caracteres da resposta (4, 10, 20, 40), mais o recuo: o tamanho do campo diz à pessoa o tamanho da resposta.
Mostrar código
<input class="feitio-input" data-width="4" inputmode="numeric" autocomplete="one-time-code">
<input class="feitio-input" data-width="10" autocomplete="postal-code">
<input class="feitio-input" data-width="20">
<input class="feitio-input" data-width="40">Estados
Desativado é raro: traço tracejado e fundo apagado. Se o valor nunca muda, mostre como texto, não como campo.
Bons e maus padrões
Faça assim
Código de verificação
Quatro dígitos, campo para quatro.
Não faça
Código de verificação
Um campo enorme para quatro dígitos faz a pessoa duvidar do que deve escrever.
Acessibilidade
- Use o
typee oautocompletecertos (email,tel,one-time-code): o mobile mostra o teclado certo e o navegador preenche sozinho. - Números que não são quantidade (códigos, CEP) usam
inputmode="numeric", nãotype="number".
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-input" | obrigatório | A forma do campo. |
data-width | "2", "4", "10", "20", "40" | Quantos caracteres a resposta tem. Sem o atributo, ocupa a coluna. |
type, inputmode, autocomplete | os da resposta | O teclado certo e o preenchimento automático. |
aria-invalid="true" | com erro | O traço em vinho. |
disabled | — | Raro: prefira mostrar o valor como texto. |