Component · input.text-field
Text field
A single-line or multi-line field for entering text.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
label | yes | Visible label associated with the field. |
input | yes | Editable text surface. |
description | no | Helper or instructional text. |
error | no | Validation message when the value is invalid. |
States
- default
- hover
- focus-visible
- filled
- disabled
- read-only
- invalid
Keyboard
- Tab moves focus into and out of the field
- Printable keys insert text when editable
Accessibility
Provide an accessible name via the visible label relationship. Describe errors with a programmatic relationship to the input. Do not convey required or invalid status by color alone.
Motion
Caret and subtle focus ring transitions are acceptable; under reduced motion, show focus without pulsing.
Platform mappings
web
web
Native input or textarea with associated label; aria-invalid and aria-describedby when needed.
apple
apple
SwiftUI TextField or TextEditor with labeled accessibility traits.
android
android
Compose TextField or OutlinedTextField with supporting and error text semantics.