# Checkbox: Long content

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

Example: https://hextaui.com/docs/checkbox/examples/long-content
Component docs: https://hextaui.com/docs/checkbox.md

## Add this example

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

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

## Source

```tsx title="components/examples/checkbox/long-content.tsx"
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>
  )
}
```

## 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)
- [Controlled](https://hextaui.com/docs/checkbox/examples/controlled.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)
- [Right to left](https://hextaui.com/docs/checkbox/examples/rtl.md)