Switch
네이티브 checked 상태와 폼 의미론을 갖추고, 켜고 끄는 설정을 즉시 반영하는 스위치예요.
핵심 속성
| 판단 기준 | 선택 방법 |
|---|---|
| 상태 | 비제어 상태는 defaultChecked, 제어 상태는 checked와 onCheckedChange를 써요. |
| 사용 가능 여부 | readOnly는 초점과 폼 값을 유지하고, disabled는 상호작용과 제출을 막아요. |
| 의미론 | 즉시 반영되는 설정에 쓰고, 여러 선택을 함께 제출할 때는 체크박스를 써요. |
| 폼 | name, value, uncheckedValue, form, required와 네이티브 초기화를 지원해요. |
스위치에는 TRField.Item 안의 TRField.Label을 함께 두거나 aria-label로 접근 가능한 이름을 붙이세요. Field.Item이 레이블과 스위치를 연결하니 id나 htmlFor를 직접 지정하지 않아도 돼요. 편집 가능한 스위치에 초점이 있으면 Space 키로 전환해요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/switch.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRField } from '@tinyrack/ui/components/field';
import { TRSwitch } from '@tinyrack/ui/components/switch';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
현재 설정을 보여줘요
상호작용을 유지하거나 없애요
편집 가능, 읽기 전용, 사용 불가 고유 링크
읽기 전용 스위치는 초점과 폼 값을 유지하고, 비활성 스위치는 탭 순서와 제출에서 빠져요.
확인을 필수로 받아요
API
상태와 사용 가능 여부
| Prop | 타입 / 기본값 | 용도 |
|---|---|---|
checked, defaultChecked | boolean, false | 설정을 제어하거나 초기화해요. |
onCheckedChange | (checked, details) => void | 변경 시도를 알려줘요. |
disabled, readOnly | boolean, false | 상호작용을 없애거나 초점 가능한 읽기 전용 값을 유지해요. |
폼과 합성
name, value, uncheckedValue, form, required, inputRef는 숨겨진 네이티브 입력으로 전달해요. 비제어 루트는 초기화할 때 defaultChecked로 돌아가고, 제어 루트는 checked를 따라요. Root와 Thumb은 Base UI의 render, ref, 이벤트, 상태 기반 className과 style을 지원하고 관련 상태를 data 속성으로 노출해요.
모듈은 TRSwitch, 두 이름 있는 파트, 각 prop 및 상태 타입을 내보내요. CSS는 직접 가져와야 해요.