TextInput
A one-line field for short text: a name, an email, a code.
On this page
Playground
State
Background
<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
Code
Postal code
City
Reminder subject
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
<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
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
typeandautocomplete(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", nottype="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. |