Forms

Autocomplete

semantic HTML

입력 내용에 맞는 후보를 제안합니다.

stablefreeSince 0.3

Live example

LanguageTypeScript

<label>Language<span data-standard-component="autocomplete" data-choice-input><input type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" value="TypeScript" placeholder="Type to filter" data-choice-query><select data-choice-select><option value="js">JavaScript</option><option value="ts" selected>TypeScript</option><option value="go">Go</option></select><ul role="listbox" data-choice-list hidden></ul></span></label><output data-example-output aria-live="polite">TypeScript</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.3`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

자유 입력값과 제안 선택값을 구분하고 label, required, Escape 종료 및 폼 제출 계약을 제공합니다.

Server template guidance

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