Embossed UI

Search documentation

Search for a page or component.

Label

Renders an accessible label associated with controls.

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

export function LabelDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Label htmlFor="workspace">Workspace name</Label>
      <Input id="workspace" defaultValue="Acme" />
    </div>
  )
}

Installation

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

Usage

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Your email address</Label>

Examples

Disabled control

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

export function LabelDisabledControl() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Input id="api-key" disabled className="peer order-last" />
      <Label htmlFor="api-key">API key</Label>
    </div>
  )
}

API Reference

Label is built on the Base UI Label primitive. See the Base UI documentation for every prop.

KbdMarker