기본, 보조, 강조 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 토글 스위치입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
토글 구성 요소는 사용자가 기능이나 설정을 켜거나 끌 수 있는 바이너리 스위치입니다. 기본 HTML 체크박스 입력으로 구축되고 Tailwind CSS 애니메이션으로 강화된 토글은 부울 상태를 제어하는 직관적인 방법을 제공합니다. Frutjam 토글 시스템은 다양한 색상, 크기 및 비활성화된 상태를 지원하므로 설정 패널, 기능 플래그 및 기본 설정 컨트롤에 적합합니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| toggle | 베이스 | 애니메이션 켜기/끄기 스위치 입력 |
| toggle-xs | 크기 | 아주 작은 |
| toggle-sm | 크기 | 작은 |
| toggle-md | 크기 | 중간(기본값) |
| toggle-lg | 크기 | 크기가 큰 |
| toggle-xl | 크기 | 특대 |
| toggle-primary | 색상 | 기본 테마 색상 |
| toggle-secondary | 색상 | 보조 테마 색상 |
| toggle-accent | 색상 | 악센트 테마 색상 |
| toggle-neutral | 색상 | 중립 테마 색상 |
| toggle-info | 색상 | 정보 의미 색상 |
| toggle-success | 색상 | 성공 의미 색상 |
| toggle-warning | 색상 | 경고 의미 색상 |
| toggle-error | 색상 | 오류 의미 색상 |
기본 사용법
1 2 | <input type="checkbox" class="toggle"> <input type="checkbox" class="toggle" checked> |
1 2 | <input type="checkbox" className="toggle"> <input type="checkbox" className="toggle" checked> |
토글 크기
html
1 2 3 4 5 | <input type="checkbox" class="toggle toggle-xs"> <input type="checkbox" class="toggle toggle-sm"> <input type="checkbox" class="toggle toggle-md"> <input type="checkbox" class="toggle toggle-lg"> <input type="checkbox" class="toggle toggle-xl"> |
색상 전환
html
1 2 3 4 5 6 7 8 | <input type="checkbox" class="toggle" checked> <input type="checkbox" class="toggle toggle-primary" checked> <input type="checkbox" class="toggle toggle-secondary" checked> <input type="checkbox" class="toggle toggle-accent" checked> <input type="checkbox" class="toggle toggle-info" checked> <input type="checkbox" class="toggle toggle-success" checked> <input type="checkbox" class="toggle toggle-warning" checked> <input type="checkbox" class="toggle toggle-error" checked> |
비활성화된 토글
html
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
라벨로 전환
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-primary" checked> <span>Enable notifications</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-success" checked> <span>Dark mode</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-warning"> <span>Analytics</span> </label> |
상태 전환
Off
On
Disabled
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="flex gap-4 items-center"> <div> <p class="text-sm font-medium mb-2">Off</p> <input type="checkbox" class="toggle toggle-primary"> </div> <div> <p class="text-sm font-medium mb-2">On</p> <input type="checkbox" class="toggle toggle-primary" checked> </div> <div> <p class="text-sm font-medium mb-2">Disabled</p> <input type="checkbox" class="toggle toggle-primary" disabled> </div> </div> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 비녀장 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.