입력 / switch
Switch
on/off 를 즉시 전환하는 토글 스위치 (Radix Switch 기반).
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
on/off 를 즉시 전환하는 토글 스위치 (Radix Switch 기반).
Workbench 불러오는 중…
Component intent의도와 경계 읽기
즉시 반영되는 이진 설정(알림 켜기/끄기 등)에 쓰는 접근성 토글. Space/Enter 토글·role=switch·aria-checked 는 Radix 가 처리하고, @axe/ui 는 트랙과 썸(thumb) 스타일만 입힌다. 시각 라벨이 필요하면 별도 <Label htmlFor> 로 연결한다. 제출 시점이 따로 있는 참/거짓 값에는 Checkbox 를 검토.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
라벨과 함께
import { Switch, Label } from "@axe/ui";<div style={{ display: "flex", alignItems: "center", gap: 8 }}> <Switch id="notify" checked={on} onCheckedChange={setOn} /> <Label htmlFor="notify">이메일 알림</Label></div>CSS-only (비-React) — 켜진 상태
<button class="axe-switch" role="switch" aria-checked="true" data-state="checked"> <span class="axe-switch__thumb"></span></button>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
checked | boolean | — | — | on/off 상태 (controlled). Radix Switch.Root prop. |
defaultChecked | boolean | — | — | uncontrolled 초기 상태. |
onCheckedChange | (checked: boolean) => void | — | — | 상태가 바뀔 때 콜백. |
disabled | boolean | — | false | 비활성 (opacity 저하 + 커서 차단). |
id | string | — | — | <Label htmlFor> 매칭용 — click-to-toggle · a11y 연결. |
name | string | — | — | 폼 제출 시 필드명 (Radix hidden input). |
...rest | React.ComponentPropsWithoutRef<typeof Switch.Root> | — | — | 나머지는 Radix Switch.Root 로 전파 (required·value 등). |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-switch | stable | 트랙(루트 button) — 폭 36 / 높이 20, checked 시 accent. |
.axe-switch__thumb | stable | 좌우로 이동하는 손잡이(썸). |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
Keyboard
- Space/Enter 로 토글
ARIA
Radix 가 role=switch + aria-checked 를 관리. 시각 라벨은 <Label htmlFor={id}> 로 연결(트랙 자체엔 텍스트가 없음).
Notes
focus-visible 시 --ring. data-state=checked 로 트랙 accent·썸 이동, data-disabled 로 흐림. 부모 .axe-form-field--error 안에서 danger 링/checked 색. prefers-reduced-motion 시 썸 이동 트랜지션 제거.
06 · Judgment