Overview
Use an input to collect a short text value that people can understand and complete without a specialized selection control.
Labeled input
A visible label identifies the value; helper text explains requirements that are not obvious from the label.
Use the address connected to your organization.
Anatomy
The field combines a persistent label, editable control, optional affordances, and supporting feedback linked to the control.
You can change this later in workspace settings.
- 1LabelRequired
Names the value in concise, familiar language.
- 2ContainerRequired
Communicates boundary, focus, validation, and availability.
- 3Prefix or leading icon
Provides non-editable context such as protocol, currency, or data type.
- 4Editable valueRequired
The entered text and caret inside the native control.
- 5Suffix or action
Shows units or a clear, copy, or password disclosure action.
- 6Supporting text
Provides guidance, validation feedback, or a character count.
When to use
Use an input when people need to enter a value that cannot be selected efficiently from a known set.
Recommended
- Collect unique or open-ended text
Names, email addresses, URLs, identifiers, search terms, and short descriptions.
- Allow direct editing
Use when people must review and modify a value character by character.
- Apply native input capabilities
Choose an appropriate type and inputMode for email, phone, URL, numeric, and password values.
When not to use
Prefer a specialized control when choices, formatting, or interaction constraints are known in advance.
Avoid
- Do not use for a small known set
Use Select, Radio, Checkbox, or Switch so available choices remain visible and valid.
- Do not use for dates or ranges
Use DatePicker or Slider when structured selection prevents formatting errors.
- Do not imitate rich text or code editing
Use a purpose-built editor when syntax, formatting, mentions, or large documents are required.
Variants
Variants change field presentation without changing semantics. Keep one treatment consistent within a form.
Container treatments
Outlined is the general default; filled supports denser surfaces; floating preserves a compact label inside the field.
Outlined
Default choice for forms on plain or mixed surfaces.
Filled
Useful in compact forms where a tonal surface groups editable controls.
Floating
Keeps a compact label visible while people enter or review a value.
Sizes
Use one size within a form. Medium provides the standard 44px control height.
States
Field states explain whether a value can be edited, whether validation is running, and how people can correct a problem.
Validation and availability
Messages explain the state in text so color and icons are never the only signal.
Supporting guidance
Checking availability…
Use at least three characters.
Workspace name is available.
| State | Trigger | Visual response | Interaction |
|---|---|---|---|
| Default | Field is available | Neutral border and supporting text | Accepts text and native input behavior |
| Focus | Keyboard, pointer, or assistive input | Primary border and visible focus treatment | Caret and editing controls become active |
| Populated | A value is present | Value replaces placeholder; floating label remains raised | Value can be edited or cleared |
| Loading | Async validation is running | Progress indicator in the trailing slot | Field remains editable unless the workflow prevents it |
| Error | Validation fails | Error border, icon, and actionable message | Focus remains in the field for correction |
| Success | Validation succeeds | Success border, icon, and confirmation | Editing remains available |
| Read only | Value can be viewed but not edited | Read-only surface treatment | Value remains focusable and copyable |
| Disabled | Field is unavailable | Reduced emphasis | Removed from editing and normal focus order |
Behavior
Input behavior follows the native control while adding predictable labeling, validation, and optional field actions.
Editing
Use controlled or uncontrolled values. Do not transform text while someone is actively typing unless the format requires it.
Validation
Validate after a meaningful interaction such as blur or submit. Avoid showing an error before people can respond.
Async checks
Debounce remote validation, show progress, and ignore stale responses when the value changes.
Form layout
Align fields in a clear reading order and keep labels, requirements, and message placement consistent.
Accessibility
Input connects its visible label and supporting message to a native form control and exposes validation state programmatically.
| Key | Action |
|---|---|
| Tab | Moves focus to the field and then to any trailing field action. |
| ShiftTab | Moves focus to the previous interactive control. |
| Esc | Preserves native browser behavior; clear only through the visible clear action. |
- Provide a visible label for every editable field.
- Use the correct native type and autocomplete value.
- Link helper and validation text with aria-describedby.
- Expose invalid values with aria-invalid.
- Keep error messages specific and actionable.
- Do not disable paste in password or verification fields.
- Maintain a visible focus indication in every variant.
- Ensure clear, copy, and password actions have accessible names.
Content guidelines
Labels and messages should make the expected value and correction path immediately understandable.
Use noun labels
Name the information being requested rather than writing a question or instruction.
Work email
Show realistic examples
Use placeholder text only for format or domain examples, never essential instructions.
name@company.com
Explain constraints early
Put stable requirements in helper text instead of waiting for an avoidable error.
Use 8–64 characters.
Write actionable errors
State what is wrong and how to fix it without blaming the person.
Enter a valid work email address.
Examples
Compose field affordances only when they reduce ambiguity or support a specific workflow.
Validation
Pair programmatic validation state with clear, adjacent feedback.
Enter a complete email address, such as alex@company.com.
Structured values
Prefixes and suffixes clarify which part of the displayed value is editable.
Describe the goal and expected outcome.
0 / 240
Props / API
Input extends native input attributes except size and prefix, which use the component-specific API.
Props