Text field.
Accepts a short piece of text on a single line.
See it in context
What it is
A text field supports ordinary editing, selection, and paste within a constrained input area. A persistent label identifies the expected value even after the placeholder disappears.
When to use it
Use it for a short value such as a project name and keep the label visible.
Know the difference
A text area supports longer, multiline writing; a text field normally holds one line.
Across platforms
Web
Use a labeled native input and its appropriate type, inputmode, and autocomplete hints. Browser presentation and the available autofill UI vary.
iOS · iPadOS · Android
Choose the keyboard and content type for the value being entered. Keep the field visible above the on-screen keyboard and preserve the user’s selection.
macOS · Windows · Linux
Support ordinary keyboard editing, selection, paste, and undo. A desktop field should not depend on a touch-only accessory keyboard.
Go to the source
Primary documentation for the pattern and its platform conventions.