사용법
제어형
checked와 onCheckedChange로 상태를 제어해요. label과 description으로 스위치의 역할을 설명해요.
화면 밝기를 어둡게 전환해요.
푸시 알림을 받아요.
스타일 커스터마이징
Switch 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Switch
className="shadow-md"
style={{
--gtd-switch-bg: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Switch
classNames={{
root: "my-switch-root",
copy: "my-switch-copy",
label: "my-switch-label",
description: "my-switch-description",
control: "my-switch-control"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-switch-bg | 트랙 배경 |
| --gtd-switch-checked-bg | 켜짐 배경 |
| --gtd-switch-thumb-bg | 썸 배경 |
인터페이스
SwitchProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | — | 스위치 레이블 |
| description | string | — | 보조 설명 |
| checked | boolean | — | 제어형 checked |
| defaultChecked | boolean | — | 비제어형 초기값 |
Switch 컴포넌트 Props 표
가져오기
import { Switch } from "@/components/ui/Switch";