104Get started
HextaUI

Label: Icon

Icons inside a label are sized and muted to sit next to the text.

import { IconLock } from "@tabler/icons-react"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelIcon() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="label-icon-key">
        <IconLock aria-hidden="true" />
        API key
      </Label>
      <Input id="label-icon-key" defaultValue="sk_live_51H…" readOnly />
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/label-icon.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–

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