---
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/vi/components/checkbox
---

# Checkbox Component

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ả                                 |
| ------------------ | --------------- | ------------------------------------------ |
| checkbox           | Căn cứ          | Styled checkbox input                      |
| checkbox-circle    | Phong cách      | Fully circular checkbox                    |
| checkbox-rounded   | Phong cách      | Moderately rounded checkbox                |
| checkbox-square    | Phong cách      | Square checkbox with no rounding           |
| checkbox-disabled  | Công cụ sửa đổi | Disabled appearance for non-input elements |
| checkbox-xs        | Kích cỡ         | Cực nhỏ                                    |
| checkbox-sm        | Kích cỡ         | Bé nhỏ                                     |
| checkbox-md        | Kích cỡ         | Trung bình (mặc định)                      |
| checkbox-lg        | Kích cỡ         | Lớn                                        |
| checkbox-xl        | Kích cỡ         | Cực lớn                                    |
| checkbox-2xl       | Kích cỡ         | 2× extra large                             |
| checkbox-primary   | Màu sắc         | Màu chủ đề chính                           |
| checkbox-secondary | Màu sắc         | Màu chủ đề phụ                             |
| checkbox-accent    | Màu sắc         | Màu chủ đề nhấn mạnh                       |
| checkbox-neutral   | Màu sắc         | Màu chủ đề trung tính                      |
| checkbox-info      | Màu sắc         | Màu sắc ngữ nghĩa thông tin                |
| checkbox-success   | Màu sắc         | Màu ngữ nghĩa thành công                   |
| checkbox-warning   | Màu sắc         | Màu ngữ nghĩa cảnh báo                     |
| checkbox-error     | Màu sắc         | Lỗi ngữ nghĩa màu sắc                      |

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

## Checkbox Sizes

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

## Checkbox Colors

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

## Disabled Checkboxs

```html
<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
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">
```

## Checkboxs With Labels

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