Label

Displays a text label connected to a form control, with disabled and peer state handling.

Installation


pnpm dlx shadcn@latest add @basic-ui/label

Usage

"use client"
 
import { useId } from "react"
import { Label } from "@/components/ui/label"

Avatar

File Dropzone

On This Page

Installation Usage Example Default Label

'use client';

import { useId } from 'react';

import { Label } from '@/registry/basic-ui/label';

export function LabelDefault() {
  const id = useId();

  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Email address</Label>
      <input
        id={id}
        type="email"
        placeholder="you@example.com"
        className="border-input focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 h-9 w-full rounded-md border px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
      />
    </div>
  );
}

'use client';

import { useId } from 'react';

import { Label } from '@/registry/basic-ui/label';

export function LabelDefault() {
  const id = useId();

  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Email address</Label>
      <input
        id={id}
        type="email"
        placeholder="you@example.com"
        className="border-input focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 h-9 w-full rounded-md border px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
      />
    </div>
  );
}