TextInput
Un campo de una línea para texto corto: un nombre, un correo electrónico, un código.
En esta página
Playground
Estado
Fondo
<div class="feitio-field"><label class="feitio-label" for="pg-t">Nombre del recordatorio</label><input class="feitio-input" id="pg-t" value="Regar las plantas"></div>Cuándo usarlo
- Para respuestas que caben en una línea y la persona tiene que escribir.
Cuándo no usarlo
- Texto largo: Textarea.
- Hora: TimeInput.
- Opciones conocidas: Radios o Select.
Ejemplos
Code
Postal code
City
Reminder subject
Anchos
El ancho cuenta los caracteres de la respuesta (4, 10, 20, 40), más el relleno: el tamaño del campo indica al usuario el tamaño de la respuesta.
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
Desactivado es raro: línea punteada y fondo apagado. Si el valor nunca cambia, muéstralo como texto, no como un campo.
Hacer y no hacer
Do
Verification code
Cuatro dígitos, un campo para cuatro.
Don’t
Verification code
Un campo enorme para cuatro dígitos hace que la persona dude de lo que escribir.
Accesibilidad
- Use el
typecorrecto yautocomplete(email,tel,one-time-code): el móvil muestra el teclado adecuado y el navegador lo completa. - Los números que no son cantidades (códigos, códigos postales) usan
inputmode="numeric", notype="number".
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-input" | obligatorio | La forma del campo. |
data-width | "2", "4", "10", "20", "40" | Cuántos caracteres tiene la respuesta. Sin ella, llena la columna. |
type, inputmode, autocomplete | aquellos de la respuesta | El teclado correcto y la autocompletado. |
aria-invalid="true" | con un error | La línea de vino. |
disabled | — | Raro: preferir mostrar el valor como texto. |