Label

An accessible label for form controls.

Installation

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

Usage

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

<Label htmlFor="name">Name</Label>;

Examples

Default

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

export default function LabelDefault() {
  return <Label htmlFor="demo">Full name</Label>;
}

With Input

Pair with Input using a matching htmlFor / id to create an accessible field.

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

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

Disabled

The label dims automatically when its associated control is disabled via the peer-disabled selector.

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

export default function LabelDisabled() {
  return (
    <div className="grid w-full max-w-sm gap-1.5">
      <Label htmlFor="username">Username</Label>
      <Input id="username" placeholder="Enter username" disabled />
    </div>
  );
}

Props

PropTypeDefault
htmlForstring—
classNamestring—

All other props are forwarded to the underlying <label> element.