# Label: Long content

> Long labels wrap, and unbroken strings break instead of widening the layout.

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

## Add this example

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

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

## Source

```tsx title="components/examples/label/long-content.tsx"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelLongContent() {
  return (
    <div className="flex w-64 max-w-full flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-long" indicator="optional">
          Where should we send invoices for the international subsidiary
        </Label>
        <Input id="label-long" />
      </div>
      <Label>
        <Checkbox />
        billing-notifications@an-extremely-long-company-domain.example.com
      </Label>
    </div>
  )
}
```

## Props in this example

### Label

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `htmlFor` | `string` | – | The id of the control. Leave it out when the label wraps the control. |
| `indicator` | `"required" \| "optional"` | – | Mark the label from the control's required state. Off by default. |

## More Label examples

- [Follows its control](https://hextaui.com/docs/label/examples/states.md)
- [Required and optional](https://hextaui.com/docs/label/examples/indicator.md)
- [Checkbox](https://hextaui.com/docs/label/examples/checkbox.md)
- [Icon](https://hextaui.com/docs/label/examples/icon.md)
- [Right to left](https://hextaui.com/docs/label/examples/rtl.md)