---
title: "Radio"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Radio using native HTML inputs. Custom colors, sizes, and grouped sets for accessible, theme-aware single-choice form controls."
url: https://frutjam.com/pl/components/radio
---

# Radio Component

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

## Rozmiary radia

```html
<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
<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
<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
<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
<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>
```