Components / Base / Text input
B2 · Base
Text input
A labelled field, a hint, and an inline error.
<label class="c-field">Owner<input class="c-input" value="A. Rahim"></label>
<label class="c-field">Reviewer<input class="c-input" aria-invalid="true" aria-describedby="rev-err"></label>
<p id="rev-err" class="c-error">Enter a reviewer. This field is empty.</p>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- The page collects a short value.
- Errors belong on the field.
When not to use
- The value is one of a few known options. Use a select or segmented control.
- The text is a paragraph. Use a textarea.
Usage
<label class="c-field">Owner<input class="c-input" value="A. Rahim"></label>
<label class="c-field">Reviewer<input class="c-input" aria-invalid="true" aria-describedby="rev-err"></label>
<p id="rev-err" class="c-error">Enter a reviewer. This field is empty.</p>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| c-input | class | — | 34 px field, 8 px radius, strong line. |
| aria-invalid | true | absent | Draws the danger line. |
| aria-describedby | id | — | Points at the error or the hint. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves into the field. |
| Type | Edits the value. Number-key routing ignores this field. |
Accessibility
- Every field has a label.
- The error is text, associated with aria-describedby.
- The invalid field uses aria-invalid.
Motion
- No motion.
Pattern origin
Base control. The field chrome is gallery CSS on top of the tokens.