라디오 구성 요소
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 라디오 버튼입니다. 크기 xs~xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
Radio button components allow users to select exactly one option from a set of mutually exclusive choices. Built with native HTML input elements and enhanced with Tailwind CSS, radio buttons support multiple sizes, colors, and states. Accessible and keyboard-navigable, radios are ideal for preference selection, filtering, and single-choice form questions.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | 타입 | Description |
|---|---|---|
| radio | Base | Styled radio button input |
| radio-circle | Style | Fully circular radio (default) |
| radio-rounded | Style | Moderately rounded radio |
| radio-square | Style | Square radio with no rounding |
| radio-disabled | Modifier | Disabled appearance for non-input elements |
| radio-xs | Size | Extra small |
| radio-sm | Size | Small |
| radio-md | Size | Medium (default) |
| radio-lg | Size | Large |
| radio-xl | Size | Extra large |
| radio-2xl | Size | 2× extra large |
| radio-primary | Color | Primary theme color |
| radio-secondary | Color | Secondary theme color |
| radio-accent | Color | Accent theme color |
| radio-neutral | Color | Neutral theme color |
| radio-info | Color | Info semantic color |
| radio-success | Color | Success semantic color |
| radio-warning | Color | Warning semantic color |
| radio-error | Color | Error semantic color |
Basic Usage
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"> |
Radio Sizes
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"> |
Radio Colors
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"> |
Disabled radio
html
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Radio Shapes
Square Radio
html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Rounded or Circle Radio
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"> |
Radio with label
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> |