104Get started
HextaUI

Checkbox: Sibling label

When the label can’t wrap the box, render the checkbox as a <button> with nativeButton and point the label at it with htmlFor.

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

export function CheckboxSiblingLabel() {
  return (
    <div className="flex items-center gap-2 text-sm">
      <Checkbox id="terms" nativeButton render={<button />} />
      <label htmlFor="terms">Accept terms and conditions</label>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/checkbox-sibling-label.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
nativeButtonSet to true when render is a <button>.
booleanfalse
render
ReactElement | (props, state) => ReactElement<span>

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