Data
Query Builder
semantic HTML중첩된 데이터 검색 조건을 시각적으로 구성합니다.
Live example
<form data-standard-component="query-builder" data-query-builder><div data-query-rows><p data-query-row><label>Field<select><option>Status</option><option>Amount</option></select></label><label>Operator<select><option>Equals</option><option>Greater than</option></select></label><label>Value<input value="Active"></label><button type="button" data-remove-query disabled>Remove</button></p></div><button type="button" data-add-query>Add condition</button><output data-example-output aria-live="polite">1 condition</output></form>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.4 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
각 field, operator, value에 label을 제공하고 제거 버튼은 조건 순서를 포함한 이름을 사용합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->