ui/components/label

Label

Styled label with optional form control wrapping. Standalone mode renders colored uppercase text. Wrapper mode (via label prop) renders the label above or beside children content.

Preview

tsx

1 import { Label } from "@/components/ui/label";2 3 export default function LabelDefault() {4   return <Label>Model</Label>;5 }6

Installation

$pnpm exec dgadd add ui/label

[Installs to]src/components/ui/label[Item]ui/label

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Label } from "@/components/ui/label";2 3 export default function LabelDefault() {4   return <Label>Model</Label>;5 }6

Examples

Wrapper

Preview

tsx

1 import { Input } from "@/components/ui/input";2 import { Label } from "@/components/ui/label";3 4 export default function LabelWrapper() {5   return (6     <Label label="Project Name" color="primary">7       <Input placeholder="my-project" />8     </Label>9   );10 }11

Horizontal

Preview

tsx

1 import { Input } from "@/components/ui/input";2 import { Label } from "@/components/ui/label";3 4 export default function LabelHorizontal() {5   return (6     <Label label="Notification email" orientation="horizontal">7       <Input type="email" placeholder="alerts@example.com" />8     </Label>9   );10 }11

Colors

Preview

tsx

1 import { Label } from "@/components/ui/label";2 3 export default function LabelColors() {4   return (5     <div className="flex flex-col gap-3">6       <Label color="default">Default</Label>7       <Label color="primary">Primary</Label>8       <Label color="success">Success</Label>9       <Label color="warning">Warning</Label>10       <Label color="error">Error</Label>11     </div>12   );13 }14

Disabled

Preview

tsx

1 import { Input } from "@/components/ui/input";2 import { Label } from "@/components/ui/label";3 4 export default function LabelDisabled() {5   return (6     <Label label="Project Name" color="primary">7       <Input placeholder="my-project" disabled />8     </Label>9   );10 }11

API Reference

Label

Name	Type	Default	Description
color	"default" \| "primary" \| "success" \| "warning" \| "error"	"default"	Color token applied to the label text.
label	string	—	When set, switches to wrapper mode: renders the label text alongside children inside a single native <label>.
orientation	"vertical" \| "horizontal"	"vertical"	Wrapper-mode layout direction. Vertical stacks the label above; horizontal places it inline.
required	boolean	false	Appends a muted required indicator after the label text. Inside a Field it escalates to the error hue while that field is invalid; standalone it stays muted.
children	ReactNode	—	Text content (standalone mode) or the wrapped form control (wrapper mode).

Accessibility

Notes

Standalone vs Wrapper Mode

Without the label prop, Label renders as a simple styled <label> with colored uppercase text. With the label prop, it wraps children in a flex container — the label becomes a <span> above (or beside) the child content.

Orientation

In wrapper mode, orientation controls layout direction. Vertical (default) stacks the label above children with a small gap. Horizontal places them side-by-side, useful for checkbox-style layouts.

Native Label Wrapping

Wrapper mode uses native label wrapping, which only associates text with labelable descendants such as input, textarea, and select. Div-based Checkbox and Radio controls are not labelable through the wrapper; pass their own label prop instead.

Disabled State

Wrapper mode automatically resolves the muted token when it contains a disabled form control, and marks GrayText in forced-colors mode. Standalone mode does not inspect sibling controls; apply any disabled appearance explicitly through className.

Source

Install via CLI: pnpm exec dgadd add ui/label.

Highlighted source loads after this disclosure opens. Browse the source repository.

Label

Installation

Usage

Examples

Wrapper

Horizontal

Colors

Disabled

API Reference

Label

Accessibility

Notes

Standalone vs Wrapper Mode

Orientation

Native Label Wrapping

Disabled State

Source

View component source (6 files)