토글

토글은 켜짐(on) 또는 꺼짐(off) 두 가지 상태를 갖는 버튼 컴포넌트예요. 특정 기능을 켜고 끄는 스위치 같은 역할을 하지만, 버튼 형태로 보여준답니다. 텍스트 서식 도구(굵게, 기울임 등)처럼 옵션을 on/off 할 때 유용하죠.

출처: 문서

본문

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

CLI Manual

npx shadcn@latest add toggle

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

npm install @radix-ui/react-toggle

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

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

토글 컴포넌트를 import 하고, on/off 하고 싶은 동작을 담은 콘텐츠를 안에 넣어 주세요.

import { Toggle } from "@/components/ui/toggle"

<Toggle>Toggle</Toggle>

기본, 아웃라인, 텍스트 포함, 작은 크기, 큰 크기, 비활성 등 다양한 변형이 준비되어 있어요.