Search field

Component preview

A text input inside a named search form that submits a query to find matching content.

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: search box, query field, site search

a box to search the catalog
type words and press Enter to find results
a site search with a clear button
enter a query in the header
find matching articles from this field
a search input without suggestion options

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.

Search field

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

Your task

Search for dialog, submit the query, then open one of the displayed concept results.

Edge case to verify

A query with no match shows an explicit empty result, while the simulated failure preserves the input and offers Retry.

Mission

Search field

Search for dialog, submit the query, then open one of the displayed concept results.

Primary state: The named search landmark contains the query field, visible submit action, and clear control when populated.

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

Searching a site, catalog, or results collection
Providing a clear and repeatable query submission

Avoid it when

The text is a general form property
Selectable suggestions are required but Combobox behavior is not implemented

Compare similar concepts

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

Text field

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

Technical details

Behaviors

Submit a query
Enter submits the current query through a named search form without changing the field pattern.
Clear the query
The clear control empties the query, keeps focus in the field, and updates results predictably.
Explain validation
A specific inline message identifies the invalid field and explains how to correct it.

States

Search idle with an empty query
Search idle with an empty query
Search query ready to submit
Search query ready to submit
Search loading
Search loading
Search results visible
Search results visible
No search results
No search results
Search error
Search error
Search result opened
Search result opened

State transitions

Search idle with an empty query → Search query ready to submit
Typing meaningful search terms reveals the clear control and prepares explicit submission.
Search query ready to submit → Search loading
Enter or the visible Search action starts one request and blocks duplicate submission.
Search loading → Search results visible
The request finishes with matching concepts and exposes their result buttons.
Search loading → No search results
The request finishes without a match and exposes the explicit No concept found state.
Search loading → Search error
The simulated error query fails while preserving the input and exposing Retry with an example.
Search error → Search loading
Retry with an example replaces the query with keyboard shortcuts and starts one new request.
Search results visible → Search result opened
Activating a result marks that concept as opened in the demonstration.
Search results visible → Search query ready to submit
Editing the submitted query marks it ready for a new explicit search.
Search query ready to submit → Search idle with an empty query
The clear control removes the query while preserving focus in the search field.
Search results visible → Search idle with an empty query
The clear control removes the submitted query and results while preserving field focus.
No search results → Search idle with an empty query
The clear control removes the unmatched query and preserves focus in the field.
Search result opened → Search loading
Submitting after opening a result clears the opened-result status and starts the current query.
No search results → Search query ready to submit
Editing an unmatched submitted query removes the empty result and prepares a new search.
Search error → Search query ready to submit
Editing the failed query removes the error and prepares explicit resubmission.
Search loading → Search query ready to submit
Editing during loading cancels the pending result update and prepares the changed query.
Search loading → Search idle with an empty query
Clear during loading cancels the pending result update, empties the query, and preserves focus.
Search error → Search idle with an empty query
Clear removes the failed query and error while preserving focus in the field.
Search result opened → Search idle with an empty query
Clear removes the query, results, and opened-result status while preserving field focus.

Test scenarios

Context: A concept directory searches known UI concept names after explicit submission.
Mission: Search for dialog, submit the query, then open one of the displayed concept results.
Primary state: The named search landmark contains the query field, visible submit action, and clear control when populated.
Edge case: A query with no match shows an explicit empty result, while the simulated failure preserves the input and offers Retry.

Accessibility

Role: search landmark containing native search input
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: Submitting leaves focus in the search form while results update below; clearing returns focus to the query field.
Dismissal: Not applicable: results update inline; Clear removes the query, submitted results, opened-result status, and errors.
Scroll: The focused field, helper text, and validation message remain visible while the page or an on-screen keyboard changes the viewport.
Announcement: The search landmark name, field label, submitted query, result count, loading, no-result, and error states are exposed.
Keyboard: Tab focuses the query field
Enter submits the search
Tab reaches the explicit clear and submit controls

Bindings

form[role=search] with input[type=search]
implementationKind
native
nativeElement
form[role=search] with input[type=search]
ariaPattern
search landmark and searchbox
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: A plain search field submits a query. Once it presents selectable filtered suggestions, the interaction becomes a Combobox.
Verify binding source

Sources

WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Claim covered: Search field: native input types, labeling, state, validation, and form participation.
WHATWG HTML: Forms
WHATWG · standard · 2026-07-16
Claim covered: Search 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.