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

Komponent pola wyboru

Ostatnia aktualizacja:

Pole wyboru CSS Tailwind tylko dla CSS z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl, stan nieokreślony. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

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>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Pole wyboru. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP