doksam-ui
홈ProfilesTokensIconsComponentsPatternsTemplatesRules

Switch

켜짐/꺼짐 상태를 전환하는 토글 스위치입니다.

데모

코드

<div className="flex items-center gap-2">
  <Switch id="dark-mode" defaultChecked />
  <Label htmlFor="dark-mode">다크 모드</Label>
</div>
<div className="flex items-center gap-2">
  <Switch id="notify" />
  <Label htmlFor="notify">주문 체결 알림 받기</Label>
</div>
<div className="flex items-center gap-2">
  <Switch id="auto-reinvest" defaultChecked disabled />
  <Label htmlFor="auto-reinvest">자동 재투자 (프리미엄 전용)</Label>
</div>

사용 규칙

Do
  • 즉시 반영되는 on/off 설정에만 Switch를 쓰고, 저장 버튼이 필요한 값은 다른 입력을 사용한다.
  • Switch의 id와 Label의 htmlFor를 연결해 라벨 클릭으로도 상태를 바꿀 수 있게 한다.
  • 권한상 바꿀 수 없는 설정은 disabled와 함께 이유를 라벨에 명시한다.
Don't
  • Switch 하나로 저장이 필요한 여러 단계의 설정을 표현하지 않는다.
  • 라벨 없이 Switch만 단독 배치해 무엇을 켜고 끄는지 불명확하게 두지 않는다.