7onicDESIGN SYSTEM

Switch

Switch는 설정의 ON/OFF를 즉시 전환하는 토글 컨트롤입니다. 변경이 즉시 반영될 때 사용합니다.

5
Colors
3
Sizes
5
Positions
Radix
Base

Playground

미리보기
D
Size
Color
Position
Icon
State
Options
<Switch
  label="Dark mode"
/>

Sizes

sm
트랙24×14
썸12px
이동 거리10px
폰트12px
Gap8px
default
트랙32×18
썸16px
이동 거리14px
폰트14px
Gap10px
lg
트랙40×22
썸20px
이동 거리18px
폰트16px
Gap12px

Features

With Label

label prop으로 스위치에 라벨을 부여할 수 있습니다.

<Switch label="Dark mode" />
<Switch label="Email notifications" defaultChecked />

Label Position

labelPosition prop으로 라벨 배치를 변경할 수 있습니다. 기본값은 end(오른쪽)입니다.

end (default)
start
top
bottom
sides
<Switch label="End" />
<Switch label="Start" labelPosition="start" />
<Switch label="Top" labelPosition="top" />
<Switch label="Bottom" labelPosition="bottom" />
<Switch startLabel="Off" endLabel="On" />

With Icon

checkedIcon / uncheckedIcon prop으로 썸 안에 아이콘을 표시할 수 있습니다. sm 크기에서는 자동 숨김 처리됩니다.

Check / X
Moon / Sun (lg)
<Switch
  checkedIcon={<Check />}
  uncheckedIcon={<X />}
/>

<Switch
  size="lg"
  checkedIcon={<Moon />}
  uncheckedIcon={<Sun />}
  label="Dark mode"
/>

States

Off
On
Disabled Off
Disabled On
<Switch />
<Switch defaultChecked />
<Switch disabled />
<Switch disabled defaultChecked />

API

Props

checkedundefined
boolean

제어 모드의 ON/OFF 상태

defaultCheckedundefined
boolean

비제어 모드의 초기 상태

onCheckedChangeundefined
(checked: boolean) => void

상태 변경 시 콜백

size"default"
"sm" | "default" | "lg"

스위치 크기

labelundefined
string

스위치 라벨 텍스트

labelPosition"end"
"start" | "end" | "top" | "bottom"

라벨 배치 위치

startLabelundefined
string

스위치 왼쪽 라벨 (sides 배치)

endLabelundefined
string

스위치 오른쪽 라벨 (sides 배치)

color"default"
"default" | "primary" | "success" | "warning" | "error"

체크 시 트랙 색상과 아이콘 색상

checkedIconundefined
ReactNode

체크 시 썸 안에 표시할 아이콘

uncheckedIconundefined
ReactNode

미체크 시 썸 안에 표시할 아이콘

disabledundefined
boolean

비활성 상태

requiredundefined
boolean

필수 필드

nameundefined
string

폼 name 속성

valueundefined
string

폼 value 속성. Radix 기본값: "on"

Anatomy

1
2
3
Enable notifications
Track width32px
Track height18px
Thumb size16px
1
Track
스위치 외곽 트랙
2
Thumb
슬라이드하는 손잡이
3
Label
텍스트 라벨 (선택)

Best Practices

✓

권장

  • ✓즉시 효과가 반영되는 설정에 사용
  • ✓명확한 라벨과 함께 사용
  • ✓설정 화면의 ON/OFF 전환에 사용
  • ✓기본 상태를 신중하게 선택
✕

지양

  • ✗폼 제출이 필요하면 Checkbox 사용
  • ✗다중 선택 상황에서는 Checkbox 사용
  • ✗라벨 없이 사용하지 않기
  • ✗부정형 라벨 피하기 ("비활성화" 대신 "활성화")

Accessibility

키보드 조작

SpaceON/OFF 전환
Tab포커스 이동

ARIA 속성

  • role="switch" 자동 부여
  • aria-checked 자동 관리
  • 포커스 인디케이터
  • label 으로 클릭 영역 확대