Plinth

Label

Standalone label for controls used outside a Field.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/label.json

Usage

Use Label with htmlFor when a control sits outside a Field. Inside a Field, use FieldLabel instead: it wires itself automatically.

import { Label } from "@/components/ui/label";

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

Props

Renders a native label; accepts all its props, htmlFor included.

Accessibility

  • Clicking the label focuses or toggles the associated control, enlarging the hit target, which matters for checkboxes and radios especially.

Kbd

Keyboard shortcut hint.

Separator

Horizontal or vertical divider.

On this page

InstallUsagePropsAccessibility