# TextInput

A one-line field for short text: a name, an email, a code.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-t">Reminder name</label><input class="feitio-input" id="pg-t" value="Water the plants"></div>
```

## When to use

-   For answers that fit on one line and the person has to type.

## When not to use

-   **Long text:** Textarea.
-   **Time:** TimeInput.
-   **Known options:** Radios or Select.

## Examples

### Widths

The width counts the answer’s characters (4, 10, 20, 40), plus padding: the field’s size tells the person the size of the answer.

Show code

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

Empty

With placeholder

Filled

Hover

Focus

Error

Write a subject

Disabled

Disabled is rare: dashed line and muted background. If the value never changes, show it as text, not as a field.

## Do and don’t

Do

Verification code

Four digits, a field for four.

Don’t

Verification code

A huge field for four digits makes the person doubt what to write.

## Accessibility

-   Use the right `type` and `autocomplete` (`email`, `tel`, `one-time-code`): mobile shows the right keyboard and the browser fills it in.
-   Numbers that are not quantities (codes, postal codes) use `inputmode="numeric"`, not `type="number"`.

## Attributes

Attribute

Values

What for

`class="feitio-input"`

required

The field’s shape.

`data-width`

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

How many characters the answer has. Without it, it fills the column.

`type`, `inputmode`, `autocomplete`

those of the answer

The right keyboard and autofill.

`aria-invalid="true"`

with an error

The wine line.

`disabled`

—

Rare: prefer showing the value as text.