Label

An accessible label for form controls.

Email

import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'

export default function LabelDemo() {
  return (
    <div className="grid w-full max-w-xs gap-1.5">
      <Label htmlFor="label-demo-email">Email</Label>
      <Input id="label-demo-email" type="email" placeholder="you@example.com" />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/label.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Label imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'

<div className="grid gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" />
</div>

API Reference

Name	Type	Default	Description
...props	React.LabelHTMLAttributes<HTMLLabelElement>	—	Every native label attribute (htmlFor, etc.).