Radio Component
CSS-only Tailwind CSS radio buttons with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Komponenty przycisków opcji pozwalają użytkownikom wybrać dokładnie jedną opcję z zestawu wzajemnie wykluczających się opcji. Zbudowane z natywnych elementów wejściowych HTML i wzbogacone o CSS Tailwind, przyciski opcji obsługują wiele rozmiarów, kolorów i stanów. Dostępne i obsługiwane za pomocą klawiatury radiotelefony idealnie nadają się do wybierania preferencji, filtrowania i zadawania pytań w formie pojedynczego wyboru.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| radio | Opierać | Stylizowane wejście przycisku radiowego |
| radio-circle | Styl | W pełni okrągłe radio (domyślne) |
| radio-rounded | Styl | Radio średnio zaokrąglone |
| radio-square | Styl | Radio kwadratowe bez zaokrągleń |
| radio-disabled | Modyfikator | Wyłączony wygląd elementów innych niż wejściowe |
| radio-xs | Rozmiar | Bardzo mały |
| radio-sm | Rozmiar | Mały |
| radio-md | Rozmiar | Średni (domyślny) |
| radio-lg | Rozmiar | Duży |
| radio-xl | Rozmiar | Bardzo duży |
| radio-2xl | Rozmiar | 2× bardzo duże |
| radio-primary | Kolor | Podstawowy kolor motywu |
| radio-secondary | Kolor | Kolor motywu drugorzędnego |
| radio-accent | Kolor | Kolor motywu akcentującego |
| radio-neutral | Kolor | Neutralny kolor motywu |
| radio-info | Kolor | Kolor semantyczny informacji |
| radio-success | Kolor | Sukces semantyczny kolor |
| radio-warning | Kolor | Ostrzeżenie kolor semantyczny |
| radio-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
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"> |
Rozmiary radia
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"> |
Kolory radia
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"> |
Wyłączone radio
html
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Kształty radiowe
Kwadratowe radio
html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Radio zaokrąglone lub okrągłe
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 z etykietą
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> |