Label

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/label.json

npx shadcn@latest add https://prototyper-ui.com/r/label.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/label.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/label.json

This will add the following files to your project:

• components/ui/label.tsx

Usage

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

<Label>Email address</Label>

Examples

With Input

Styling

Data Slots

Use data-slot attributes to target the label in CSS:

Customization Examples

/* Make all labels uppercase */
[data-slot="label"] {
  @apply text-xs uppercase tracking-wide;
}

<Label className="text-base font-semibold">Custom label</Label>

API Reference

Label

A styled <label> element for form controls.

All standard label element props are forwarded via ...props.

Accessibility

Keyboard Interactions

Label is a non-interactive display element and does not have keyboard interactions. Clicking a label focuses or activates its associated form control via the htmlFor attribute or nesting.

ARIA Attributes

• Renders as a native <label> element.
• Associates with a form control via htmlFor or by wrapping the control.
• Automatically receives data-disabled and data-invalid styling from parent Field or group contexts.

Related