104Get started
HextaUI

Label: Checkbox

Wrap a checkbox so the whole label toggles it, or place the label beside it with htmlFor. A disabled checkbox dims its label either way.

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export function LabelCheckbox() {
  return (
    <div className="flex flex-col gap-4">
      <Label>
        <Checkbox defaultChecked />
        Email me when someone replies
      </Label>
      <Label>
        <Checkbox disabled />
        Weekly digest (coming soon)
      </Label>
      <div className="flex items-center gap-2">
        <Checkbox id="label-checkbox-terms" />
        <Label htmlFor="label-checkbox-terms">Accept the terms</Label>
      </div>
    </div>
  )
}

Add this example

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

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

To add only the component, follow the Label installation.

Props in this example

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

Label

PropTypeDefault
htmlForThe id of the control. Leave it out when the label wraps the control.
string–

Every prop is in the Label API reference.

More Label examples

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

Related components