---
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/zh-hant/components/checkbox
---

# Checkbox Component

複選框組件允許使用者從一組中選擇一個或多個選項。複選框使用本機 HTML 輸入元素建立並使用 Tailwind CSS 增強，支援多種尺寸、顏色和狀態。透過鍵盤導航和螢幕閱讀器支援完全可訪問，複選框在表單、過濾器選項和權限管理介面中無縫工作。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級                 | 類型  | 描述           |
| ------------------ | --- | ------------ |
| checkbox           | 根據  | 樣式化的複選框輸入    |
| checkbox-circle    | 風格  | 全圓形複選框       |
| checkbox-rounded   | 風格  | 中等圓角的複選框     |
| checkbox-square    | 風格  | 沒有四捨五入的方形複選框 |
| checkbox-disabled  | 修飾符 | 非輸入元素的禁用外觀   |
| checkbox-xs        | 尺寸  | 特小號          |
| checkbox-sm        | 尺寸  | 小的           |
| checkbox-md        | 尺寸  | 中（預設）        |
| checkbox-lg        | 尺寸  | 大的           |
| checkbox-xl        | 尺寸  | 特大號          |
| checkbox-2xl       | 尺寸  | 2×特大號        |
| checkbox-primary   | 顏色  | 主要主題顏色       |
| checkbox-secondary | 顏色  | 次要主題色        |
| checkbox-accent    | 顏色  | 強調主題顏色       |
| checkbox-neutral   | 顏色  | 中性主題色        |
| checkbox-info      | 顏色  | 訊息語意顏色       |
| checkbox-success   | 顏色  | 成功語意色        |
| checkbox-warning   | 顏色  | 警告語意顏色       |
| checkbox-error     | 顏色  | 錯誤語意顏色       |

## 基本用法

## 複選框尺寸

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

## 複選框顏色

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

## 禁用複選框

```html
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">
```

## 複選框形狀

### 方形複選框

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

### 圓形/圓形複選框

`checkbox-circle` 和 `checkbox-rounded` 這兩個類別都會產生相同的視覺樣式，從而允許靈活的命名約定。

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

## 帶標籤的複選框

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