104Get started
HextaUI

Label: Required and optional

indicator="optional" tags controls without required, and indicator="required" adds an asterisk to controls with it. The mark is hidden from screen readers, which already announce required fields.

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

export function LabelIndicator() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-name" indicator="optional">
          Full name
        </Label>
        <Input id="label-indicator-name" autoComplete="name" required />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-company" indicator="optional">
          Company
        </Label>
        <Input id="label-indicator-company" autoComplete="organization" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-card" indicator="required">
          Card number
        </Label>
        <Input id="label-indicator-card" inputMode="numeric" required />
      </div>
    </div>
  )
}

Add this example

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

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