기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 라디오 버튼입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
라디오 버튼 구성 요소를 사용하면 사용자는 상호 배타적인 선택 항목 집합에서 정확히 하나의 옵션을 선택할 수 있습니다. 기본 HTML 입력 요소로 구축되고 Tailwind CSS로 강화된 라디오 버튼은 다양한 크기, 색상 및 상태를 지원합니다. 접근 가능하고 키보드로 탐색할 수 있는 라디오는 기본 설정 선택, 필터링 및 단일 선택 양식 질문에 이상적입니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| radio | 베이스 | 스타일이 적용된 라디오 버튼 입력 |
| radio-circle | 스타일 | 완전 원형 라디오(기본값) |
| radio-rounded | 스타일 | 적당히 둥근 라디오 |
| radio-square | 스타일 | 반올림이 없는 사각형 라디오 |
| radio-disabled | 수정자 | 비입력 요소에 대한 비활성화된 모양 |
| radio-xs | 크기 | 아주 작은 |
| radio-sm | 크기 | 작은 |
| radio-md | 크기 | 중간(기본값) |
| radio-lg | 크기 | 크기가 큰 |
| radio-xl | 크기 | 특대 |
| radio-2xl | 크기 | 2× 특대형 |
| radio-primary | 색상 | 기본 테마 색상 |
| radio-secondary | 색상 | 보조 테마 색상 |
| radio-accent | 색상 | 악센트 테마 색상 |
| radio-neutral | 색상 | 중립 테마 색상 |
| radio-info | 색상 | 정보 의미 색상 |
| radio-success | 색상 | 성공 의미 색상 |
| radio-warning | 색상 | 경고 의미 색상 |
| radio-error | 색상 | 오류 의미 색상 |
기본 사용법
1 2 | <input type="radio" name="radio-1" class="radio" checked="checked"> <input type="radio" name="radio-1" class="radio"> |
1 2 | <input type="radio" name="radio-1" className="radio" checked="checked"> <input type="radio" name="radio-1" className="radio"> |
라디오 크기
html
1 2 3 4 5 | <input type="radio" name="radio-sizes" class="radio radio-xs" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-sm" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-md" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-lg" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-xl" checked="checked"> |
라디오 컬러
html
1 2 3 4 5 6 7 8 9 | <input type="radio" name="radio-colors" class="radio" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-primary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-secondary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-accent" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-info" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-success" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-warning" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-error" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-neutral" checked="checked"> |
장애인 라디오
html
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
라디오 모양
사각라디오
html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
둥근 또는 원형 라디오
html
1 2 | <input type="radio" name="shape-demo2" class="radio radio-circle" checked="checked"> <input type="radio" name="shape-demo2" class="radio radio-rounded" checked="checked"> |
라벨이 있는 라디오
html
1 2 3 4 5 6 7 8 | <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-small" name="size" value="small"> <label for="size-small">Small</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-medium" name="size" value="medium"> <label for="size-medium">Medium</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-large" name="size" value="large"> <label for="size-large">Large</label> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 라디오 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.