Text field

Component preview

A labeled single-line control for entering or editing one textual value.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: text input, input field, single-line input

a box to enter my display name
one line for an email address
let me type a short value
a labeled form input
edit this account name
a field with help and an error below

Try it

Enter text

Compare all three behaviors

Shared comparison scenario: A form collects text, with field length and submission intent determining the appropriate input control.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Text field

Text field accepts one line; Textarea accepts multiple lines, while Search field submits a query through a search context.

Your task

Enter a valid name, submit, then exceed the limit and recover from the linked validation message.

Edge case to verify

After invalid submission, the entered text remains, the precise error is linked, and focus moves only according to the form recovery plan.

Mission

Text field

Enter a valid name, submit, then exceed the limit and recover from the linked validation message.

Primary state: The visible label, current value, and helper text remain available before any error.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Label

The persistent text that names a control or field.

Use it when

Entering a name, email, code, or other short value
Editing one textual property in a form

Avoid it when

The response needs line breaks
The primary intent is to submit a search query

Compare similar concepts

Textarea accepts line breaks and longer free-form content; Text field is single-line, while Search field is a query input with search submission behavior.

Textarea

Search field submits a query; Text field edits a general value, while Textarea accepts multiline content.

Search field

Technical details

Behaviors

Enter text
Typing edits a single value while selection, clipboard, and undo behaviors remain native.
Explain validation
A specific inline message identifies the invalid field and explains how to correct it.

States

Display name valid
Display name valid
Display name invalid
Display name invalid

State transitions

Display name valid → Display name invalid
Submitting a value above the stated length limit preserves the text and links the precise error.
Display name invalid → Display name valid
Editing the value back within the stated limit resolves the linked validation error.

Test scenarios

Context: A profile form edits a public display name with length guidance.
Mission: Enter a valid name, submit, then exceed the limit and recover from the linked validation message.
Primary state: The visible label, current value, and helper text remain available before any error.
Edge case: After invalid submission, the entered text remains, the precise error is linked, and focus moves only according to the form recovery plan.

Accessibility

Role: native textbox
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: A visible focus indicator surrounds the field without hiding its value, label, or error.
Dismissal: Not applicable: the entered value remains until edited, reset, or intentionally submitted.
Scroll: The focused field, helper text, and validation message remain visible while the page or an on-screen keyboard changes the viewport.
Announcement: Label, input purpose, required state, helper relationship, invalid state, and specific error are exposed.
Keyboard: Tab focuses the field
Standard editing, selection, undo, and clipboard shortcuts remain native
Enter follows the surrounding form contract

Bindings

label with input
implementationKind
native
nativeElement
label with input
ariaPattern
textbox
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: The visible label remains separate from placeholder text, and help or error messages are programmatically associated.
Verify binding source

Sources

WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Claim covered: Text field: native input types, labeling, state, validation, and form participation.
WHATWG HTML: Forms
WHATWG · standard · 2026-07-16
Claim covered: Text field: native form controls, labels, submission, validation, and disabled-state behavior.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.