---
title: "Checkbox"
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 Checkbox using native HTML inputs. Custom colors, sizes, indeterminate state, and full keyboard support for accessible multi-select forms."
url: https://frutjam.com/pl/components/checkbox
---

# Checkbox Component

Składniki pola wyboru pozwalają użytkownikom wybrać jedną lub wiele opcji z zestawu. Zbudowane z natywnych elementów wejściowych HTML i wzbogacone o CSS Tailwind, pola wyboru obsługują wiele rozmiarów, kolorów i stanów. W pełni dostępne dzięki nawigacji za pomocą klawiatury i obsłudze czytnika ekranu pola wyboru działają płynnie w formularzach, opcjach filtrów i interfejsach zarządzania uprawnieniami.

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                                            |
| ------------------ | ----------- | ----------------------------------------------- |
| checkbox           | Opierać     | Stylizowane pole wyboru                         |
| checkbox-circle    | Styl        | W pełni okrągłe pole wyboru                     |
| checkbox-rounded   | Styl        | Umiarkowanie zaokrąglone pole wyboru            |
| checkbox-square    | Styl        | Kwadratowe pole wyboru bez zaokrągleń           |
| checkbox-disabled  | Modyfikator | Wyłączony wygląd elementów innych niż wejściowe |
| checkbox-xs        | Rozmiar     | Bardzo mały                                     |
| checkbox-sm        | Rozmiar     | Mały                                            |
| checkbox-md        | Rozmiar     | Średni (domyślny)                               |
| checkbox-lg        | Rozmiar     | Duży                                            |
| checkbox-xl        | Rozmiar     | Bardzo duży                                     |
| checkbox-2xl       | Rozmiar     | 2× bardzo duże                                  |
| checkbox-primary   | Kolor       | Podstawowy kolor motywu                         |
| checkbox-secondary | Kolor       | Kolor motywu drugorzędnego                      |
| checkbox-accent    | Kolor       | Kolor motywu akcentującego                      |
| checkbox-neutral   | Kolor       | Neutralny kolor motywu                          |
| checkbox-info      | Kolor       | Kolor semantyczny informacji                    |
| checkbox-success   | Kolor       | Sukces semantyczny kolor                        |
| checkbox-warning   | Kolor       | Ostrzeżenie kolor semantyczny                   |
| checkbox-error     | Kolor       | Błąd koloru semantycznego                       |

## Podstawowe użycie

## Rozmiary pól wyboru

```html
<input type="checkbox" checked="checked" class="checkbox checkbox-xs">
<input type="checkbox" checked="checked" class="checkbox checkbox-sm">
<input type="checkbox" checked="checked" class="checkbox checkbox-md">
<input type="checkbox" checked="checked" class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" class="checkbox checkbox-xl">
<input type="checkbox" checked="checked" class="checkbox checkbox-2xl">
```

## Kolory pól wyboru

```html
<input type="checkbox" checked="checked" class="checkbox">
<input type="checkbox" checked="checked" class="checkbox checkbox-primary">
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
<input type="checkbox" checked="checked" class="checkbox checkbox-accent">
<input type="checkbox" checked="checked" class="checkbox checkbox-info">
<input type="checkbox" checked="checked" class="checkbox checkbox-success">
<input type="checkbox" checked="checked" class="checkbox checkbox-warning">
<input type="checkbox" checked="checked" class="checkbox checkbox-error">
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral">
```

## Wyłączone pola wyboru

```html
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">
```

## Kształty pól wyboru

### Kwadratowe pole wyboru

```html
<input type="checkbox" class="checkbox checkbox-square" checked="checked">
```

### Okrąg/zaokrąglone pole wyboru

Obie klasy `checkbox-circle` i `checkbox-zaokrąglone` dają w rezultacie ten sam styl wizualny, co pozwala na elastyczne konwencje nazewnictwa.

```html
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">
```

## Pola wyboru Z etykietami

```html
<input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked">
<label for="newsletter">Subscribe to our newsletter</label>
```