104Get started
HextaUI

Checkbox: Controlled

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

"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>
  )
}

Add this example

This adds the example as components/examples/checkbox/controlled.tsx, together with the Checkbox component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/checkbox-controlled.json

To add only the component, follow the Checkbox installation.

Props in this example

The Checkbox props this example sets, from the API reference.

Checkbox

PropTypeDefault
checked
boolean–
onCheckedChange
(checked: boolean, details) => void–

Every prop is in the Checkbox API reference.

More Checkbox examples

See them all, with keyboard support and accessibility notes, on the Checkbox page.

Related components