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

# Checkbox

> A checkbox input with optional label and helper text.

```tsx theme={null}
import { Checkbox } from "@fanvue/ui";
import type { CheckboxProps, CheckboxSize } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-checkbox--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Checkbox — Default" />
</Frame>

```tsx theme={null}
import { Checkbox } from "@fanvue/ui";

<Checkbox label="Checkbox" helperText="Helper" />
```

## Checked

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-checkbox--checked&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Checkbox — Checked" />
</Frame>

```tsx theme={null}
import { Checkbox } from "@fanvue/ui";

<Checkbox checked />
```

## With Label

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-checkbox--with-label&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Checkbox — With Label" />
</Frame>

```tsx theme={null}
import { Checkbox } from "@fanvue/ui";

<Checkbox label="Accept terms and conditions" />
```

## All States

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-checkbox--all-states&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Checkbox — All States" />
</Frame>

```tsx theme={null}
import { Checkbox } from "@fanvue/ui";

<div className="flex flex-col gap-6">
  <div className="flex flex-col gap-4">
    <Checkbox label="Unchecked" />
    <Checkbox label="Checked" checked />
    <Checkbox label="Indeterminate" checked="indeterminate" />
    <Checkbox label="Disabled" disabled />
    <Checkbox label="Disabled + checked" disabled checked />
    <Checkbox label="With helper text" helperText="Helper" />
  </div>
  <div className="flex flex-col gap-4">
    <Checkbox size="16" label="Compact (16px)" helperText="Dense surfaces like data tables" />
    <Checkbox size="small" label="Small text size" helperText="Smaller label and helper" />
    <Checkbox size="default" label="Default text size" helperText="Default label and helper" />
  </div>
</div>
```

## Disabled

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-checkbox--disabled&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Checkbox — Disabled" />
</Frame>

```tsx theme={null}
import { Checkbox } from "@fanvue/ui";

<Checkbox disabled />
```

## Props

## Checkbox

A checkbox input with optional label and helper text. Supports checked, unchecked, and indeterminate states.

The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for form-library compatibility — libraries like react-hook-form call `register()` which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the Radix checkbox state via `useImperativeHandle`.

<ParamField path="helperText" type="string">
  Descriptive text displayed below the label.
</ParamField>

<ParamField path="label" type="string">
  Label text displayed next to the checkbox.
</ParamField>

<ParamField path="size" type="&#x22;small&#x22; | &#x22;16&#x22; | &#x22;20&#x22; | &#x22;default&#x22;" default="20">
  Size variant.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `CheckboxProps`, `CheckboxSize`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)