104Get started
HextaUI

Checkbox: Long content

The box stays on the first line while a long label and unbroken text wrap beside it.

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

export function CheckboxLongContent() {
  return (
    <label className="flex w-64 max-w-full items-start gap-3 text-sm">
      <span className="flex h-5 items-center">
        <Checkbox />
      </span>
      <span className="flex min-w-0 flex-col gap-0.5 wrap-anywhere">
        <span className="leading-5 font-medium">
          A label long enough to wrap onto a second and even a third line in a
          narrow container
        </span>
        <span className="text-muted-foreground">
          averyveryverylongunbrokenstringthatwouldotherwiseescapeitscontainer
        </span>
      </span>
    </label>
  )
}

Add this example

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

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

To add only the component, follow the Checkbox installation.

More Checkbox examples

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

Related components