Switch

구조는 당근 SEED Switch(Apache-2.0)를 따른다 — 스위치(Switchmark) · 스위치 + 라벨(Switch). 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-09-30 사용자 결정).

수치 원본은 switch.yaml 이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

크기 · 톤 · 상태를 고르면 스펙대로 그린 Switch 와 그 코드가 바뀐다. 실제로 눌러 볼 수 있다.

import { Switch } from "@/components/ui/switch"

<Switch defaultChecked label="종일" />

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Size제목 링크 복사

크기 이름은 트랙 높이다. 트랙 · 엄지 · 라벨이 함께 정해진다.

• 16(트랙 26 × 16 · 라벨 13) — 촘촘한 자리. 줄 높이는 24 다(누르는 영역의 바닥).
• 24(트랙 38 × 24 · 라벨 14) — 기본. 화면 안의 설정 · 폼.
• 32(트랙 52 × 32 · 라벨 16) — 제목이 큰 줄, 모바일에서 홀로 서는 스위치.

누르는 영역은 라벨까지 묶어 가로 · 세로 44 까지 넓힌다(기초 Inclusive — 44 는 반드시).

크기

글자 칸은 크기 / 줄 높이다. 라벨의 굵기는 크기와 상관없이 아래 공통 값(500)이다.

켜면 엄지가 트랙 폭에서 트랙 높이를 뺀 만큼 옆으로 간다.

크기별 엄지 — 켬

모든 조합에 공통인 값:

공통

Tone제목 링크 복사

켰을 때의 색이다. neutral(짙은 회색)이 기본이고, 브랜드 색(brand)은 서비스 핵심 흐름에서만 쓴다 — Checkbox · Radio 와 같은 규칙이다(사용자 결정). SEED 도 Switch 는 Neutral 로 쓴다. 다크에서 neutral 의 켜짐은 밝은 트랙이 되어 꺼짐보다 또렷하다.

State제목 링크 복사

켬 · 끔과 상호작용 상태가 곱해진다.

상태 매트릭스 — neutral · 끔

상태 매트릭스 — neutral · 켬

상태 매트릭스 — brand · 켬

모션

Guidelines제목 링크 복사

누르는 영역제목 링크 복사

라벨을 포함한 줄 전체가 누르는 영역이다. 설정 줄처럼 스위치만(Switchmark) 끼워 쓸 때는 그 줄 전체가 눌려야 한다 — 스위치만 누르게 두지 않는다.

누르는 순간 적용될 때만제목 링크 복사

Switch 는 누르는 순간 결과가 나타나는 설정에만 쓴다. 저장 · 실행을 눌러야 적용되는 켜고 끄기는 Checkbox 다(사용자 결정 — SEED 와 같다). 누르면 화면이 바로 바뀌는 것(일정의 "종일" — 날짜 칸이 바뀐다)은 값이 저장 때 들어가더라도 Switch 다.

누르면 스위치가 바로 바뀐다 — 서버 응답을 기다리지 않는다. 저장에 실패하면 되돌리고 무엇이 안 됐는지 알린다.

따로 움직이는 기능에만제목 링크 복사

스위치 하나는 기능 하나를 켜고 끈다. "모두 켜기" 같은 부모 스위치를 두지 않는다 — 전체를 고르고 풀 일이 있으면 Checkbox 의 부모 · 자식 묶음을 쓴다. 위 설정이 꺼져서 아래 설정을 쓸 수 없을 때는 아래 스위치를 막는다(값은 그대로 둔다).

막힌 줄은 라벨까지제목 링크 복사

스위치를 막으면 라벨(과 설명)도 비활성 색으로 바꾼다. 스위치만 회색이면 줄 전체가 막혔는지 알 수 없다 — 켜진 채 막힌 트랙은 꺼진 트랙과 비슷한 회색이라(다크에서는 같은 값이다) 스위치만 봐서는 "막힌 켬" 인지 읽기 어렵다.

켜짐 색제목 링크 복사

켜짐 색은 짙은 회색이 기본이다. 브랜드 색은 서비스 핵심 흐름에만 — 설정 화면의 스위치마다 브랜드 색을 깔면 브랜드 색 버튼이 설 자리가 없어진다.

설정 줄제목 링크 복사

"라벨 왼쪽 · 스위치 오른쪽" 줄(제목 · 설명 · 아이콘이 붙는다)은 Switch 가 아니라 List 의 스위치 줄(ListSwitchItem)이다(사용자 결정 — SEED 와 같다). 줄의 여백 · 글자 · 누름은 List 가 정하고, Switch 는 그 줄에 스위치만(Switchmark 32) 끼운다. 줄 모양의 규칙이다 — 화면 전체를 List 로 그리라는 말이 아니다(2026-10-22 7B).

• 줄 전체가 누르는 영역이다 — 줄이 <label> 이라 줄의 제목이 스위치의 이름이 된다.
• 줄을 누르면 줄의 콘텐츠가 함께 줄고, 스위치는 따로 줄지 않는다(기초 Feedback v104 — SEED 도 List 안의 스위치 축소를 끈다).

Switch 와 Checkbox제목 링크 복사

둘 다 켜고 끄는 선택을 보인다. 값이 적용될 때 · 항목 구성 · 하위 항목 · 경계 사례(결제 알림 · 단종 카드 포함 · 일정 종일은 Switch, 고정 금액으로 기록은 Checkbox)를 견준 표는 Checkbox 의 "Checkbox 와 Switch" 한 벌이다(2026-10-22 사용자 결정 7B — https://claude.ai/artifact/SmHD31RQxTjWbfK83nbcym).

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/switch.tsx 를 쓴다 — Switch(스위치 + 라벨) · Switchmark(스위치). 아래 미리보기는 스펙 값으로 그린 모습이다.

기본제목 링크 복사

import { Switch } from "@/components/ui/switch"

<Switch defaultChecked label="종일" />

크기제목 링크 복사

<Switch size="16" defaultChecked label="16" />
<Switch size="24" defaultChecked label="24" />
<Switch size="32" defaultChecked label="32" />

톤제목 링크 복사

<Switch defaultChecked label="neutral" />
<Switch defaultChecked tone="brand" label="brand" />

값 다루기 · 비활성제목 링크 복사

const [allDay, setAllDay] = useState(false)

<Switch checked={allDay} onCheckedChange={setAllDay} label="종일" />

<Switch disabled label="종일" />
<Switch disabled defaultChecked label="종일" />

스위치만제목 링크 복사

목록 줄은 List 의 ListSwitchItem 을 쓴다 — 줄의 여백 · 글자 · 누름이 정해져 있다. 줄을 따로 짜야 할 때만 Switchmark 를 쓰고, 줄을 <label> 로 감싸 줄 어디를 눌러도 바뀌게 한다 — 줄의 글자가 스위치의 이름이 된다.

import { Switchmark } from "@/components/ui/switch"

<label className="flex cursor-pointer items-center gap-x3 px-x6 py-x3">
  <span className="flex-1">결제 알림</span>
  <Switchmark checked={on} onCheckedChange={setOn} />
</label>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 누르는 순간 적용되는 설정에 쓴다.
• 모든 스위치에 이름을 둔다(보이는 라벨 또는 aria-label).
• 설정 줄에서는 줄 전체가 눌리게 한다.
• 막을 때는 라벨까지 비활성 색으로 바꾼다.
• 자세히 보기 같은 링크는 라벨 옆이나 아래에 둔다 — 라벨은 켜고 끄는 글만.

❌ Don't제목 링크 복사

• 저장을 눌러야 적용되는 폼의 옵션에 Switch — Checkbox 를 쓴다.
• "예 · 아니오" 를 고르는 선택 목록 — 켜고 끄는 것이면 Switch 나 Checkbox 다.
• 부모 스위치로 아래 스위치를 한꺼번에 켜고 끄기 — 부모 · 자식은 Checkbox 묶음.
• 확인이 필요한 위험한 동작에 Switch — 버튼 + 확인 창을 쓴다.
• 스위치를 줄여 그리기 — 작은 자리에는 16 을 쓴다.
• 라벨 안에 링크 · 버튼 — 줄의 누르는 영역(44)이 덮어 눌리지 않는다. 라벨 옆이나 아래에 따로 둔다(사용자 결정 2026-10-08, Checkbox · Radio 와 같다).

Specification제목 링크 복사

switch.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Switch 를 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.

SEED 와 다른 점제목 링크 복사

• 기본 크기는 24(사용자 결정) — SEED 는 32. 제품의 스위치가 모두 높이 24 이고 줄 제목이 13 ~ 14 라서다.
• 비활성은 전용 색(v106 · 사용자 결정) — 켜진 채 막히면 켜진 모양 그대로 fg-disabled 채움 + bg-disabled 엄지, 꺼진 채 막히면 bg-disabled 트랙 + stroke-neutral-weak 안쪽 선 + fg-disabled 엄지. SEED 는 트랙 38% · 라벨 58% 불투명도로 흐리게 한다.
• 꺼진 트랙은 stroke-neutral-solid(표면과 3:1 이상, v109). SEED 는 palette.gray-600(흰 바탕 2.1:1)이다.
• 웹의 focused 를 더한다(v106). 앱의 키보드 포커스에도 그린다(2026-10-08).
• 줄 안의 맞춤은 가운데다 — SEED 는 긴 라벨의 첫 줄에 스위치를 맞춘다.

Migration notes제목 링크 복사

2026-10-22 — 견주는 표는 Checkbox 한 벌제목 링크 복사

"Switch 와 Checkbox" 표를 Checkbox 문서의 표 한 벌(경계 사례 줄 포함)로 링크하고, 설정 줄 문장에 "줄 모양의 규칙 — 화면 전체를 List 로 그리라는 말이 아니다" 를 더했다(사용자 결정 7B — https://claude.ai/artifact/SmHD31RQxTjWbfK83nbcym). 결정 그대로, 값 변경 없음.

2026-10-08 — 라벨 안 링크는 Don't제목 링크 복사

줄(Switch)의 누르는 영역(::before 44)이 라벨을 덮어 라벨 안 링크 · 버튼은 눌리지 않는다. 사용자가 비교 페이지 C 에서 레시피는 그대로 두고 Don't 에 적기로 정했다 — 링크는 라벨 옆 · 아래에(Checkbox · Radio 와 같다).

2026-09-30 — SEED Switch 구조로제목 링크 복사

사용자가 비교 페이지(https://claude.ai/artifact/VrKxQ5whsBsqGB9JZgMJk8)에서 정했다 — 틀은 SEED(Switchmark · Switch, 크기 16 · 24 · 32, 끄면 엄지가 0.8 로 작아지고 그림자 없음) · 기본 크기 24 · 비활성은 켜진 모양 그대로 색만 · 누르는 순간 적용될 때만 Switch(저장해야 적용되면 Checkbox) · 설정 줄은 List 차례에. 켜짐 색(neutral 기본 + brand)은 Checkbox 때 정한 규칙이다.

제품은 앱 적용 단계에서 옮긴다 — Desk 웹 23개 · 앱 26개(모두 44 × 24 하나), HR 웹은 쓰는 화면이 없다. 그때 같이 고칠 것:

• 저장해야 적용되는 자리를 Checkbox 로 — 웹 10 · 앱 12곳: 자산 "전체 자산 합계에 포함" · "금액 숨기기", 반복 설정 "자동 기록" · "하루 전 알림", 메모 "상단에 고정", 내보내기 "민감 정보 가리기", 가져오기 옵션 둘. 거꾸로 카드 혜택 화면의 "단종 카드 포함" 체크박스는 누르는 순간 목록이 바뀌므로 Switch 로.
• 설정 줄 — 49개 중 42개가 "라벨 왼쪽 · 스위치 오른쪽" 줄인데 화면마다 손으로 짜서 제목(12 ~ 16) · 설명(11 ~ 12) · 간격(6 ~ 12) · 누르는 범위(줄 전체 13 · 스위치만 36)가 다르다. List 차례에 정한다. 앱의 PSwitchTile 은 쓰는 곳이 없다.
• 이름 — 웹 17개 · 앱 7개가 스위치에 이름이 없다.
• 누르는 영역 — 웹 13개가 높이 24, 앱 12개가 줄 높이를 지키려고 24 로 줄였다. 앱은 "단종 포함" 스위치를 절반으로 줄여 그린다(16 으로).
• 바로 바뀌기 — 웹 알림 설정은 서버 응답을 기다리며 화면 전체를 막는다. 앱은 바로 바꾸지만 실패하면 말없이 되돌린다.
• HR — 켜고 끄기를 "예 · 아니오" 선택 목록으로 한다(공지 상단 고정 · 공휴일 매년 반복 · 휴가 정책 셋 · 음력 여부).