Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.1
Theme

Componente de caixa de seleção

Caixa de seleção Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs–xl, estado indeterminado. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Checkbox components allow users to select one or multiple options from a set. Built with native HTML input elements and enhanced with Tailwind CSS, checkboxes support multiple sizes, colors, and states. Fully accessible with keyboard navigation and screen reader support, checkboxes work seamlessly in forms, filter options, and permission management interfaces.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

Class Tipo Description
checkboxBaseStyled checkbox input
checkbox-circleStyleFully circular checkbox
checkbox-roundedStyleModerately rounded checkbox
checkbox-squareStyleSquare checkbox with no rounding
checkbox-disabledModifierDisabled appearance for non-input elements
checkbox-xsSizeExtra small
checkbox-smSizeSmall
checkbox-mdSizeMedium (default)
checkbox-lgSizeLarge
checkbox-xlSizeExtra large
checkbox-2xlSize2× extra large
checkbox-primaryColorPrimary theme color
checkbox-secondaryColorSecondary theme color
checkbox-accentColorAccent theme color
checkbox-neutralColorNeutral theme color
checkbox-infoColorInfo semantic color
checkbox-successColorSuccess semantic color
checkbox-warningColorWarning semantic color
checkbox-errorColorError semantic color

Basic Usage

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

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

Checkbox Sizes

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">

Checkbox Colors

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">

Disabled Checkboxs

html 
1
2
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">

Checkbox Shapes

Square Checkbox

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

Circle / Rounded Checkbox

The checkbox-circle and checkbox-rounded both classes result in the same visual style, allowing for flexible naming conventions.

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

Checkboxs With Labels

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>