Toggle
눌린 선택 상태가 유지되는 독립 토글 버튼. 아이콘만 쓰면 aria-label을 제공하세요. 색뿐 아니라 inset과 테두리로 선택 상태를 표시합니다.
@neumorphism-ui/toggle미리보기
설치
설치: toggle
npx shadcn@latest add @neumorphism-ui/toggleCLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.
Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.
사용법
Import
Toggle import 코드
"use client";
import { Toggle } from "@/components/ui/toggle";Example
Toggle 사용 코드
export default function Example() {
return (<div className="flex flex-wrap gap-3"><Toggle aria-label={"고정"}><span aria-hidden="true">◆</span>{"고정"}</Toggle><Toggle defaultPressed>{"고정"}</Toggle><Toggle disabled>{"잠김"}</Toggle></div>);
}API 레퍼런스
| 컴포넌트 | 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|---|
Toggle | pressed / defaultPressed | boolean | — | 제어 상태 또는 최초 상태를 지정합니다. |
Toggle | size | "sm" | "default" | "lg" | — | 컨트롤 크기를 선택합니다. |
Toggle | disabled | boolean | — | 사용자 조작을 비활성화합니다. |
접근성
- 01
아이콘만 쓰면 aria-label을 제공하세요. 색뿐 아니라 inset과 테두리로 선택 상태를 표시합니다.
- 02
render나 className을 바꿀 때 라벨 연결과 포커스 표시를 유지하세요.