Data
Filter Bar
semantic HTML검색과 여러 데이터 필터를 URL 상태로 관리합니다.
Live example
<section data-standard-component="filter-bar"><form class="ui-cluster" data-filter-bar-form><label>Status<select name="status"><option value="">All</option><option value="active">Active</option></select></label><label>Owner<input name="owner" value="Ada"></label><button type="submit">Apply filters</button></form><output data-example-output aria-live="polite">No filters applied</output></section>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
semantic form을 유지하고 URL 상태를 갱신할 때 다른 query parameter를 보존합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->