Browse components
Label
Form label with a required asterisk, optional tag and hint text that lights up while its control has focus.
Installation
npx shadcn@latest add @glint-ui/labelFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/label.json
Usage
import { Label } from "@/components/ui/label";
<Label htmlFor="email" required hint="We never share it.">Email</Label>
<input id="email" required aria-describedby="email-hint" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | "Work email" | Label text. |
| required | boolean | false | Show the required marker (also set required on the input). |
| optional | boolean | false | Show an "Optional" tag instead. |
| hint | string | "We only use this to send your invoice." | Helper text, id is `${htmlFor}-hint`. |
| disabled | boolean | false | Dimmed, not-allowed cursor. |
| htmlFor | ReactNode | — | Id of the control. Also used to light up on focus and to build the hint id. |
| className | string | — | Extra classes for the root element. |