Label
Label names a control so people know what to enter or choose.
Label has three sizes, two weights, a * marker for required fields and a disabled state. Field already renders a label, so use Label on its own only when you build the form layout yourself.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Label } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Size
small (12px), medium (14px, default), large (16px semibold).
Required & disabled
required adds a danger-colored *; disabled dims the label.
Linked to an input
Link them with htmlFor + id (useId) so clicking the label focuses the input.
Usage
Do
- Keep labels short and use sentence case.
- Always link the label to its control with htmlFor (or use Field).
- Mark required fields with required instead of writing “(required)”.
Don't
- Don't use Label as a section heading. Use the subtitle style from the type ramp.
- Don't end a label with a colon.
- Don't give labels the brand color.
Props
| Prop · Type | Default | Description |
|---|---|---|
| size"small" | "medium" | "large" | Default: "medium" | Font size 12 / 14 / 16px (large is semibold by default). |
| weight"regular" | "semibold" | Default: — | Font weight; follows size by default. |
| requiredboolean | ReactNode | Default: — | Shows a danger-colored * (or a custom marker). |
| disabledboolean | Default: — | Text in foreground-disabled. |
| htmlForstring | Default: — | id of the labeled control. |