Components / Forms

Label

A form label with a required flag (bold + destructive asterisk) and an optional hint popover. Use it standalone; inside a Field prefer FieldLabel.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/label/registry.json

Basic

Label

tsx

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

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

Required

Label · required

Full name

tsx

{/* required bolds the text and adds a destructive asterisk */}
<Label htmlFor="name" required>Full name</Label>
<Input id="name" required />

With hint

Click the blue question icon to open the popover. When required, the popover shows a “Required” note.

Label · required + hint

ABN

tsx

{/* hint adds a blue question icon that opens a popover.
    required is passed through so the popover shows a "Required" note. */}
<Label
  htmlFor="abn"
  required
  hint="Your 11-digit Australian Business Number, no spaces."
>
  ABN
</Label>
<Input id="abn" required />

Label props

Prop	Type	Default	Description
required	boolean	false	Bolds the label and appends a destructive asterisk.
hint	ReactNode	-	When set, renders a blue Hint icon to the right; clicking opens a popover. Inherits the label's required state.
htmlFor	string	-	Associates the label with a control by id (standard label attribute).