# Checkbox: Controlled

> Pass `checked` and `onCheckedChange` to keep the state in your own code.

Example: https://hextaui.com/docs/checkbox/examples/controlled
Component docs: https://hextaui.com/docs/checkbox.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/checkbox-controlled.json
```

This adds `components/examples/checkbox/controlled.tsx` with the Checkbox component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/checkbox/controlled.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"

export function CheckboxControlled() {
  const [checked, setChecked] = React.useState(false)

  return (
    <div className="flex flex-col items-start gap-3">
      <label className="flex items-center gap-3 text-sm">
        <Checkbox checked={checked} onCheckedChange={setChecked} />
        Controlled ({checked ? "on" : "off"})
      </label>
      <Button variant="outline" size="sm" onClick={() => setChecked(!checked)}>
        Toggle from outside
      </Button>
    </div>
  )
}
```

## Props in this example

### Checkbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean` | – |  |
| `onCheckedChange` | `(checked: boolean, details) => void` | – |  |

## More Checkbox examples

- [States](https://hextaui.com/docs/checkbox/examples/states.md)
- [Select all](https://hextaui.com/docs/checkbox/examples/select-all.md)
- [Nested groups](https://hextaui.com/docs/checkbox/examples/nested-groups.md)
- [Form](https://hextaui.com/docs/checkbox/examples/form.md)
- [Sibling label](https://hextaui.com/docs/checkbox/examples/sibling-label.md)
- [Cards](https://hextaui.com/docs/checkbox/examples/cards.md)
- [Long content](https://hextaui.com/docs/checkbox/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/checkbox/examples/rtl.md)