# TextInput

Einzeiliges Feld für kurzen Text: ein Name, eine E-Mail-Adresse, ein Code.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-t">Name der Erinnerung</label><input class="feitio-input" id="pg-t" value="Pflanzen gießen"></div>
```

## Wann verwenden

-   Für Antworten, die auf einer Zeile passen und die Person tippen muss.

## Wann nicht verwenden

-   **Langer Text:** Textarea.
-   **Zeit:** TimeInput.
-   **Bekannte Optionen:** Radios oder Select.

## Beispiele

### Breiten

Die Breite zählt die Zeichen der Antwort (4, 10, 20, 40) plus Padding: die Größe des Feldes gibt der Person die Größe der Antwort.

Code anzeigen

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

## States

Leer

Mit Platzhalter

Erfüllt

Hovern

Fokus

Fehler

Write a subject

Deaktiviert

Disabled ist selten: gestrichelte Linie und gedämpfter Hintergrund. Wenn der Wert nie ändert, zeigen Sie ihn als Text, nicht als Feld.

## Do and don't

Do

Verification code

Vier Ziffern, ein Feld für vier.

Don’t

Verification code

Ein riesiges Feld für vier Ziffern lässt die Person zweifelhaft sein, was sie schreiben soll.

## Barrierefreiheit

-   Verwenden Sie das richtige `type` und `autocomplete` (`email`, `tel`, `one-time-code`): Mobile zeigt die richtige Tastatur und der Browser füllt es ein.
-   Zahlen, die keine Mengen sind (Codes, Postleitzahlen), verwenden `inputmode="numeric"`, nicht `type="number"`.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-input"`

erforderlich

Die Form des Feldes.

`data-width`

`"2"`, `"4"`, `"10"`, `"20"`, `"40"`

Wie viele Zeichen die Antwort hat. Ohne es füllt es die Spalte.

`type`, `inputmode`, `autocomplete`

diese der Antwort

Das richtige Tastaturlayout und das Autocomplete-Feld.

`aria-invalid="true"`

ein Fehler

Die Weinzeile.

`disabled`

—

Selten: den Wert als Text anzeigen.