Components
Selection controls
Use the control that matches what the choice means: Switch for settings, Checkbox for picking several items, and Radio for picking exactly one.선택의 의미에 맞는 컨트롤을 사용합니다. 설정은 Switch, 여러 항목 선택은 Checkbox, 하나만 고를 때는 Radio입니다.
Switch, Checkbox, Radio
Live previewDYNGLE UI
Markup
<label for="notifications">Connection alerts</label>
<input class="dy-switch" id="notifications"
type="checkbox" role="switch" checked>
<label class="dy-choice">
<input class="dy-check" type="checkbox"> Wellness
</label>
<label class="dy-choice">
<input class="dy-radio" type="radio" name="plan"> Weekly
</label><label for="notifications">연결 알림</label>
<input class="dy-switch" id="notifications"
type="checkbox" role="switch" checked>
<label class="dy-choice">
<input class="dy-check" type="checkbox"> 웰니스
</label>
<label class="dy-choice">
<input class="dy-radio" type="radio" name="plan"> 매주
</label>When to use which언제 사용하나요?
| Component구성 요소 | Role역할 |
|---|---|
| Switch | Turns a single setting on or off immediately.하나의 설정을 즉시 켜거나 끕니다. |
| Checkbox | Selects several independent items.독립적인 여러 항목을 선택합니다. |
| Radio | Picks one option from mutually exclusive choices.서로 배타적인 선택지 중 하나를 고릅니다. |
Usage사용 가이드
Switch applies immediatelySwitch는 즉시 적용
Use a Switch for a setting that takes effect the moment it's toggled.누르는 즉시 반영되는 설정에는 Switch를 씁니다.
Don't use a Switch inside a form that only applies after pressing Save. Use a Checkbox there.저장 버튼을 눌러야 반영되는 폼 안에서는 Switch 대신 Checkbox를 씁니다.
Radio for exactly one하나만 고를 땐 Radio
Use Radio when the options exclude each other, and pre-select a sensible default.서로 배타적인 선택지에는 Radio를 쓰고, 합리적인 기본값을 미리 선택합니다.
Don't use Checkboxes for a single choice; people will expect to pick several.하나만 고르는 선택에 Checkbox를 쓰지 않습니다. 여러 개를 고를 수 있다고 기대하게 됩니다.