> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thehuxdesign.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox

> Interactive checkbox component with smooth animations and consistent styling

## Overview

`HuxCheckbox` is an interactive checkbox component with smooth animations, consistent styling, and proper accessibility support. It automatically adapts to light and dark themes while providing a clean, professional appearance.

## Basic Usage

### Simple Checkbox

<img src="https://mintcdn.com/thehuxdesign/81AtyNkpXR7HVLTv/images/checkbox/checkbox-nolabel.png?fit=max&auto=format&n=81AtyNkpXR7HVLTv&q=85&s=bbe9edb87e093707618f42b647fe8ae9" alt="Checkbox without label" width="1000" height="300" data-path="images/checkbox/checkbox-nolabel.png" />

```dart theme={null}
HuxCheckbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value ?? false;
    });
  },
)
```

### Checkbox with Label

<img src="https://mintcdn.com/thehuxdesign/81AtyNkpXR7HVLTv/images/checkbox/checkbox-label.png?fit=max&auto=format&n=81AtyNkpXR7HVLTv&q=85&s=27f5839c7be93582fe03f66bd7299e9e" alt="Checkbox with label" width="1000" height="300" data-path="images/checkbox/checkbox-label.png" />

```dart theme={null}
HuxCheckbox(
  value: isAgreed,
  onChanged: (value) {
    setState(() {
      isAgreed = value ?? false;
    });
  },
  label: 'I agree to the terms and conditions',
)
```

## Properties

### Core Properties

* `value` - Current checked state (true/false)
* `onChanged` - Callback triggered when state changes (null for disabled)
* `isDisabled` - Whether the checkbox is disabled (default: false)

### Label Properties

* `label` - Optional text label displayed next to the checkbox

### Styling Properties

* `size` - Checkbox size variant (small, medium, large)

## Size Variants

### Small Checkbox

* **Checkbox Size**: 16px × 16px
* **Icon Size**: 12px
* **Font Size**: 14px
* **Label Spacing**: 8px

### Medium Checkbox ⭐ **Default**

* **Checkbox Size**: 20px × 20px
* **Icon Size**: 14px
* **Font Size**: 16px
* **Label Spacing**: 12px

### Large Checkbox

* **Checkbox Size**: 24px × 24px
* **Icon Size**: 16px
* **Font Size**: 18px
* **Label Spacing**: 16px

## Styling & Colors

### Checkbox Colors

* **Background (Unchecked)**: `HuxTokens.surfacePrimary(context)`
* **Background (Checked)**: `HuxTokens.primary(context)`
* **Border (Unchecked)**: `HuxTokens.borderPrimary(context)`
* **Border (Checked)**: `HuxTokens.primary(context)`
* **Border (Disabled)**: `HuxTokens.borderSecondary(context)`

### Check Icon Colors

* **Check Color**: Automatically calculated for optimal contrast
* **Disabled State**: Transparent

### Text Colors

* **Label Text**: `HuxTokens.textPrimary(context)`
* **Disabled Label**: `HuxTokens.textDisabled(context)`

## States

### Unchecked State

<img src="https://mintcdn.com/thehuxdesign/81AtyNkpXR7HVLTv/images/checkbox/checkbox-unchecked.png?fit=max&auto=format&n=81AtyNkpXR7HVLTv&q=85&s=8df4aea7b4b82283320221c488617303" alt="Unchecked checkbox" width="1000" height="300" data-path="images/checkbox/checkbox-unchecked.png" />

* Empty checkbox with border
* Ready for user interaction

### Checked State

<img src="https://mintcdn.com/thehuxdesign/81AtyNkpXR7HVLTv/images/checkbox/checkbox-checked.png?fit=max&auto=format&n=81AtyNkpXR7HVLTv&q=85&s=eee6ebbbca85724d453ed28e3b4d1330" alt="Checked checkbox" width="1000" height="300" data-path="images/checkbox/checkbox-checked.png" />

* Filled checkbox with check icon
* Visual confirmation of selection

### Disabled State

<img src="https://mintcdn.com/thehuxdesign/81AtyNkpXR7HVLTv/images/checkbox/checkbox-disabled.png?fit=max&auto=format&n=81AtyNkpXR7HVLTv&q=85&s=bf1daf7823317a66321de1b5ada496fd" alt="Disabled checkbox" width="1000" height="300" data-path="images/checkbox/checkbox-disabled.png" />

```dart theme={null}
HuxCheckbox(
  value: isChecked,
  onChanged: null, // Disables the checkbox
  label: 'This option is disabled',
  isDisabled: true,
)
```

* Reduced opacity and non-interactive
* Maintains visual consistency

## Accessibility

### Screen Reader Support

* Proper semantic labeling
* State announcements
* Focus management

### Keyboard Navigation

* Tab key support
* Space/Enter key activation
* Focus indicators

## Examples

<CardGroup cols={2}>
  <Card title="Form Building" icon="file-text" href="/examples/form-building">
    See HuxCheckbox in action within forms
  </Card>

  <Card title="Basic Usage" icon="mouse-pointer" href="/examples/basic-usage">
    Try different checkbox configurations
  </Card>
</CardGroup>

## Related Components

* [HuxInput](/components/input) - Text input component
* [HuxSwitch](/components/switch) - Toggle switch component
* [HuxDateInput](/components/date-input) - Date input component