스위치

스위치는 켜짐/꺼짐 상태를 토글할 수 있는 컨트롤 컴포넌트예요. 체크박스처럼 on/off 를 다루지만, 좀 더 직관적인 토글 스타일로 보여준답니다. Radix UI의 스위치 프리미티브 위에 만들어져 있어서 접근성도 검증되어 있어요.

출처: 문서

본문

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 스위치 컴포넌트를 바로 추가할 수 있어요.

CLI Manual

npx shadcn@latest add switch

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-switch

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

스위치 컴포넌트를 import 한 뒤, 상태를 토글할 자리에 배치하면 돼요.

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

<Switch />

폼 안에서 스위치를 사용하는 예시예요.