Przyciski opcji CSS Tailwind tylko dla CSS z podstawowymi, dodatkowymi, akcentującymi i semantycznymi wariantami kolorów. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
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
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
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
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Kształty radiowe
Kwadratowe radio
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Radio zaokrąglone lub okrągłe
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ą
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> |
Używasz kodu Claude'a, kursora lub innego edytora AI?
Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Radio. Żadnych więcej zajęć z halucynacjami.