104Get started
HextaUI

Label: Long content

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

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>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/label-long-content.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–
indicatorMark the label from the control's required state. Off by default.
"required" | "optional"–

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