Label

Renders an accessible label associated with controls.

Accept terms and conditions

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/label.json"

Usage

After you add the component with the CLI, import it from your UI folder:

import { Label } from "@/components/ui/label"
 
export function MyComponent() {
  return (
    <div className="flex items-center space-x-2">
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  );
}

Examples

With Input

With Checkbox

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

API Reference

The Label component extends the standard HTML label element using Radix UI's LabelPrimitive.Root.

Prop	Type	Description
`htmlFor`	`string`	The id of the element the label is associated with.
`asChild`	`boolean`	Change the default rendered element for the one passed as a child, merging their props and behavior.

Kbd Number Input

On This Page

Installation Usage Examples With Input With Checkbox API Reference