# Checkbox

> Based on [Radix Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox)

The Radix Checkbox component provides a fully customizable checkbox with complete styling control while maintaining accessibility features.

## When to Use Radix Checkbox

Use Radix Checkbox when you need:

* Custom checkbox styling beyond native browser limits
* Animated check indicators
* Complex checkbox designs (custom icons, sizes, colors)
* Indeterminate state support

For simple forms where native styling is acceptable, the [native Checkbox](/university/core-components/checkbox.md) component works well.

## Structure

| Component              | Description                     |
| ---------------------- | ------------------------------- |
| **Checkbox**           | The main checkbox container     |
| **Checkbox Indicator** | Contains the check mark or icon |

## How to Use

1. Drag a **Checkbox** component from Components > Radix onto your canvas
2. The component includes a pre-configured indicator
3. Add a Label and associate it with the checkbox
4. Style all states (unchecked, checked, disabled)

## Properties

### Checkbox

| Property   | Description                             |
| ---------- | --------------------------------------- |
| `id`       | Unique identifier for label association |
| `name`     | Form field name for submission          |
| `value`    | Value sent when checked                 |
| `checked`  | Control checked state                   |
| `required` | Whether checking is required            |
| `disabled` | Disable the checkbox                    |

### Checkbox Indicator

| Property     | Description                          |
| ------------ | ------------------------------------ |
| `forceMount` | Keep indicator in DOM when unchecked |

## Basic Setup

```
Label (display: flex, align-items: center, gap: 8px)
├── Checkbox
│   └── Checkbox Indicator
│       └── Check icon (SVG or text)
└── "Accept terms and conditions"
```

## Styling States

### Data Attributes

| State         | Selector                     | Description       |
| ------------- | ---------------------------- | ----------------- |
| Unchecked     | `[data-state=unchecked]`     | Default state     |
| Checked       | `[data-state=checked]`       | Selected state    |
| Indeterminate | `[data-state=indeterminate]` | Partial selection |
| Disabled      | `[data-disabled]`            | Cannot interact   |

### Example Styles

**Checkbox container:**

* Default: border, background, size
* Checked: different background/border
* Focus: visible ring for accessibility

**Indicator:**

* Hidden when unchecked (opacity: 0 or display: none)
* Visible when checked (opacity: 1)
* Animate with transitions

## Indeterminate State

The indeterminate state is useful for "select all" checkboxes:

```
Checkbox (checked: "indeterminate")
└── Checkbox Indicator
    └── Minus icon (instead of check)
```

This indicates partial selection of child items.

## Custom Check Icons

Replace the default indicator content:

1. Add an SVG or icon component inside Checkbox Indicator
2. Style the icon size and color
3. Animate on check/uncheck

## Animation Tips

Add smooth check animations:

```css
/* Indicator transition */
Checkbox Indicator {
  transition:
    opacity 200ms,
    transform 200ms;
}

/* Scale animation on check */
[data-state="checked"] Checkbox Indicator {
  transform: scale(1);
}

[data-state="unchecked"] Checkbox Indicator {
  transform: scale(0);
  opacity: 0;
}
```

## Accessibility

Radix Checkbox provides:

* Full keyboard support (Space to toggle)
* ARIA attributes automatically applied
* Focus management
* Screen reader announcements

Ensure you:

* Always provide a visible label
* Maintain sufficient color contrast
* Include focus indicators

## Form Integration

Radix Checkbox works with Webstudio forms:

```
Form
├── Label
│   ├── Checkbox (name: newsletter)
│   │   └── Checkbox Indicator → ✓
│   └── "Subscribe to newsletter"
└── Button (type: submit)
```

The checkbox value is submitted with the form when checked.

## Comparison

| Feature       | Native Checkbox   | Radix Checkbox |
| ------------- | ----------------- | -------------- |
| Styling       | Limited           | Full control   |
| Custom icons  | No                | Yes            |
| Animations    | No                | Yes            |
| Indeterminate | JavaScript only   | Built-in       |
| Accessibility | Browser default   | WAI-ARIA       |
| Size          | 13-16px typically | Any size       |

## Related Components

* [Native Checkbox](/university/core-components/checkbox.md) - Simple HTML checkbox
* [Switch](/university/radix/switch.md) - Toggle on/off control
* [Radio Group](/university/radix/radio-group.md) - Single selection


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/radix/checkbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.