Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Checkbox Component

CSS-only Tailwind CSS checkbox with primary, secondary, accent, and semantic color variants. Sizes xs–xl, indeterminate state. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
checkboxOpieraćStylizowane pole wyboru
checkbox-circleStylW pełni okrągłe pole wyboru
checkbox-roundedStylUmiarkowanie zaokrąglone pole wyboru
checkbox-squareStylKwadratowe pole wyboru bez zaokrągleń
checkbox-disabledModyfikatorWyłączony wygląd elementów innych niż wejściowe
checkbox-xsRozmiarBardzo mały
checkbox-smRozmiarMały
checkbox-mdRozmiarŚredni (domyślny)
checkbox-lgRozmiarDuży
checkbox-xlRozmiarBardzo duży
checkbox-2xlRozmiar2× bardzo duże
checkbox-primaryKolorPodstawowy kolor motywu
checkbox-secondaryKolorKolor motywu drugorzędnego
checkbox-accentKolorKolor motywu akcentującego
checkbox-neutralKolorNeutralny kolor motywu
checkbox-infoKolorKolor semantyczny informacji
checkbox-successKolorSukces semantyczny kolor
checkbox-warningKolorOstrzeżenie kolor semantyczny
checkbox-errorKolorBłąd koloru semantycznego

Podstawowe użycie

<input type="checkbox" checked="checked" class="checkbox">

<input type="checkbox" checked="checked" className="checkbox">

Rozmiary pól wyboru

html 
1
2
3
4
5
6
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
<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 
1
2
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">

Pola wyboru Z etykietami

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