# TextInput

Un campo de una línea para texto corto: un nombre, un correo electrónico, un código.

## Playground

```html
<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

### 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

```html
<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

Vacío

Con marcador de posición

Lleno

Sobrecurso

Enfoque

Error

Write a subject

Deshabilitado

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 `type` correcto y `autocomplete` (`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"`, no `type="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.