Patterns
Settings Pattern
semantic HTML분류된 설정 입력과 저장 상태를 구성합니다.
Live example
<form class="x-stack" data-standard-component="settings-pattern" data-example-form="settings"><fieldset><legend>Notifications</legend><label><input type="checkbox" role="switch" checked> Product updates</label><label><input type="checkbox" role="switch"> Weekly summary</label></fieldset><button type="submit">Save settings</button><output data-example-output aria-live="polite"></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.3 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
fieldset과 legend로 설정 그룹을 구성하고 저장·오류 결과를 live region으로 안내합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->