Forms

Search Box

semantic HTML

검색 입력, 초기화, 제출 작업을 결합합니다.

stablefreeSince 0.2

Live example

Enter a query

<div data-standard-component="search-box" label="Search documentation" placeholder="Search components" value="dialog"><form role="search"><label>Search documentation<input type="search" value="dialog"></label><button type="submit">Search</button></form></div>
<output data-example-output aria-live="polite">Enter a query</output>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.2`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

label로 검색 범위를 설명하고 Enter와 검색 버튼이 같은 x-search 계약을 사용하도록 구성합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->