기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 확인란입니다. 크기 xs-xl, 불확정 상태. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
확인란 구성 요소를 사용하면 사용자는 세트에서 하나 또는 여러 옵션을 선택할 수 있습니다. 기본 HTML 입력 요소로 구축되고 Tailwind CSS로 강화된 체크박스는 다양한 크기, 색상 및 상태를 지원합니다. 키보드 탐색 및 화면 판독기 지원을 통해 완벽하게 액세스할 수 있는 확인란은 양식, 필터 옵션 및 권한 관리 인터페이스에서 원활하게 작동합니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| checkbox | 베이스 | 스타일이 지정된 체크박스 입력 |
| checkbox-circle | 스타일 | 완전 원형 체크박스 |
| checkbox-rounded | 스타일 | 적당히 둥근 확인란 |
| checkbox-square | 스타일 | 반올림이 없는 정사각형 체크박스 |
| checkbox-disabled | 수정자 | 비입력 요소에 대한 비활성화된 모양 |
| checkbox-xs | 크기 | 아주 작은 |
| checkbox-sm | 크기 | 작은 |
| checkbox-md | 크기 | 중간(기본값) |
| checkbox-lg | 크기 | 크기가 큰 |
| checkbox-xl | 크기 | 특대 |
| checkbox-2xl | 크기 | 2× 특대형 |
| checkbox-primary | 색상 | 기본 테마 색상 |
| checkbox-secondary | 색상 | 보조 테마 색상 |
| checkbox-accent | 색상 | 악센트 테마 색상 |
| checkbox-neutral | 색상 | 중립 테마 색상 |
| checkbox-info | 색상 | 정보 의미 색상 |
| checkbox-success | 색상 | 성공 의미 색상 |
| checkbox-warning | 색상 | 경고 의미 색상 |
| checkbox-error | 색상 | 오류 의미 색상 |
기본 사용법
<input type="checkbox" checked="checked" class="checkbox"> |
<input type="checkbox" checked="checked" className="checkbox"> |
체크박스 크기
html
1 2 3 4 5 6 | <input type="checkbox" checked="checked" class="checkbox checkbox-xs"> <input type="checkbox" checked="checked" class="checkbox checkbox-sm"> <input type="checkbox" checked="checked" class="checkbox checkbox-md"> <input type="checkbox" checked="checked" class="checkbox checkbox-lg"> <input type="checkbox" checked="checked" class="checkbox checkbox-xl"> <input type="checkbox" checked="checked" class="checkbox checkbox-2xl"> |
체크박스 색상
html
1 2 3 4 5 6 7 8 9 | <input type="checkbox" checked="checked" class="checkbox"> <input type="checkbox" checked="checked" class="checkbox checkbox-primary"> <input type="checkbox" checked="checked" class="checkbox checkbox-secondary"> <input type="checkbox" checked="checked" class="checkbox checkbox-accent"> <input type="checkbox" checked="checked" class="checkbox checkbox-info"> <input type="checkbox" checked="checked" class="checkbox checkbox-success"> <input type="checkbox" checked="checked" class="checkbox checkbox-warning"> <input type="checkbox" checked="checked" class="checkbox checkbox-error"> <input type="checkbox" checked="checked" class="checkbox checkbox-neutral"> |
비활성화된 체크박스
html
1 2 | <input type="checkbox" class="checkbox" disabled=""> <input type="checkbox" class="checkbox" disabled="" checked="checked"> |
체크박스 모양
정사각형 체크박스
html
<input type="checkbox" class="checkbox checkbox-square" checked="checked"> |
원/둥근 체크박스
checkbox-circle 및 checkbox-rounded 두 클래스 모두 동일한 시각적 스타일을 제공하므로 유연한 명명 규칙이 가능합니다.
html
1 2 | <input type="checkbox" class="checkbox checkbox-circle" checked="checked"> <input type="checkbox" class="checkbox checkbox-rounded" checked="checked"> |
라벨이 있는 체크박스
html
1 2 | <input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked"> <label for="newsletter">Subscribe to our newsletter</label> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 체크박스 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.