A standalone form label with required and optional markers, for controls outside a Field.
Field renders its own label and wires it to the control, so most forms never need Label. Use Label when a control sits outside a Field: a custom group, a Slider row, a label beside a Switch in a dense settings list.
required adds a red asterisk; optional adds a muted "(optional)". Mark whichever is rarer on the form. labelStyle="caps" matches Field's compact uppercase label.
Installation
npx shadcn@latest add KezLahd/rime/labelAlso installs: base.
Usage
import { Label } from "@/components/ui";
<Label htmlFor="project-name" required>Project name</Label>
<TextInput id="project-name" required />Examples
Required and optional
Styles
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Label
| Prop | Type | Default | Description |
|---|---|---|---|
| required | boolean | Adds a red asterisk after the text. Pair it with required on the control. | |
| optional | boolean | Adds a muted "(optional)" after the text. Use it when most fields are required. | |
| disabled | boolean | Dims the label to match a disabled control. | |
| labelStyle | "sentence" | "caps" | "sentence" | sentence = 13px bold (default). caps = the compact uppercase micro-label. |
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes, LabelHTMLAttributes.
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --label-ink | var(--ink-secondary) | … |
| --label-size | var(--text-small) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --danger-ink | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-small | tokens.css | … |
Accessibility
- Renders a real <label>. Point htmlFor at the control's id so clicking the label focuses it and the control gets its accessible name.
- The asterisk is hidden from assistive tech; set required on the control itself so it is announced.
Do and don't
Do
- Prefer Field, which wires label, hint and error for you.
- Write labels as nouns in sentence case.
Don't
- Don't use a Label without htmlFor (or wrapping the control).
- Don't put instructions in a label; use a hint.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open label.mdRelated: field, text-input