Label

Preview

'use client';

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

export default function LabelDemo() {
  return <Label>Email</Label>;
}

Installation

bun

bunx shadcn@latest add @sft-ui/label

With Input

Name

'use client';

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

export default function LabelDemoWithInput() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="name">Name</Label>
      <Input id="name" placeholder="Enter your name" />
    </div>
  );
}

Disabled

'use client';

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

export default function LabelDemoDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="disabled" className="opacity-50">
        Disabled
      </Label>
      <Input id="disabled" disabled />
    </div>
  );
}

API Reference

Label

Renders as a <label> element. Automatically adjusts opacity when a peer input is disabled.

Prop	Type	Default	Description
`htmlFor`	`string`	—	The `id` of the form element this label is associated with.
`className`	`string`	—	Additional CSS classes to apply.

All standard HTML label attributes are supported.