Chuyển đến nội dung chính
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.

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.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
checkboxCăn cứStyled checkbox input
checkbox-circlePhong cáchFully circular checkbox
checkbox-roundedPhong cáchModerately rounded checkbox
checkbox-squarePhong cáchSquare checkbox with no rounding
checkbox-disabledCông cụ sửa đổiDisabled appearance for non-input elements
checkbox-xsKích cỡCực nhỏ
checkbox-smKích cỡBé nhỏ
checkbox-mdKích cỡTrung bình (mặc định)
checkbox-lgKích cỡLớn
checkbox-xlKích cỡCực lớn
checkbox-2xlKích cỡ2× extra large
checkbox-primaryMàu sắcMàu chủ đề chính
checkbox-secondaryMàu sắcMàu chủ đề phụ
checkbox-accentMàu sắcMàu chủ đề nhấn mạnh
checkbox-neutralMàu sắcMàu chủ đề trung tính
checkbox-infoMàu sắcMàu sắc ngữ nghĩa thông tin
checkbox-successMàu sắcMàu ngữ nghĩa thành công
checkbox-warningMàu sắcMàu ngữ nghĩa cảnh báo
checkbox-errorMàu sắcLỗi ngữ nghĩa màu sắc

Cách sử dụng cơ bản

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