Forms
Combobox
semantic HTML텍스트 입력으로 option 목록을 필터링하고 선택합니다. native select는 SSR fallback으로 유지됩니다.
Live example
<label>City<span data-standard-component="combobox" data-choice-input><input type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" value="Seoul" placeholder="Type to filter" data-choice-query><select data-choice-select><option value="seoul" selected>Seoul</option><option value="busan">Busan</option><option value="jeju">Jeju</option></select><ul role="listbox" data-choice-list hidden></ul></span></label><output data-example-output aria-live="polite">Seoul</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과 required 상태를 제공하고 aria-activedescendant로 현재 option을 알리며 native option을 SSR fallback으로 유지합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->