---
title: "Checkbox"
type: component
version: "2.0.4"
doc_version: "2.0.4"
status: stable
date: 2026-03-11
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/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.

| Class              | Type     | Description                                |
| ------------------ | -------- | ------------------------------------------ |
| checkbox           | Base     | Styled checkbox input                      |
| checkbox-circle    | Style    | Fully circular checkbox                    |
| checkbox-rounded   | Style    | Moderately rounded checkbox                |
| checkbox-square    | Style    | Square checkbox with no rounding           |
| checkbox-disabled  | Modifier | Disabled appearance for non-input elements |
| checkbox-xs        | Size     | Extra small                                |
| checkbox-sm        | Size     | Small                                      |
| checkbox-md        | Size     | Medium (default)                           |
| checkbox-lg        | Size     | Large                                      |
| checkbox-xl        | Size     | Extra large                                |
| checkbox-2xl       | Size     | 2× extra large                             |
| checkbox-primary   | Color    | Primary theme color                        |
| checkbox-secondary | Color    | Secondary theme color                      |
| checkbox-accent    | Color    | Accent theme color                         |
| checkbox-neutral   | Color    | Neutral theme color                        |
| checkbox-info      | Color    | Info semantic color                        |
| checkbox-success   | Color    | Success semantic color                     |
| checkbox-warning   | Color    | Warning semantic color                     |
| checkbox-error     | Color    | Error semantic color                       |

## Basic Usage

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