Label

Use Label to name an input, checkbox, switch, or select trigger. It renders a native label and does not create a field, validation state, or layout by itself.

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

export default function LabelDemo() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="workspace-name">Workspace name</Label>
      <Input id="workspace-name" name="workspaceName" defaultValue="neobrutal-ui" />
      <p className="text-sm leading-5 text-foreground/70">
        Visible to everyone who can access this workspace.
      </p>
    </div>
  );
}

#Installation

Complete the base setup, then install or copy this source:

import * as React from "react";

import { cn } from "@/lib/utils";

function Label({ className, ...props }: React.ComponentProps<"label">) {
  return (
    <label
      data-slot="label"
      className={cn(
        "text-sm font-heading leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-70 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
        className,
      )}
      {...props}
    />
  );
}

export { Label };

The preview and Usage example additionally use Input. Install it before copying either example:

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/input.json

#Usage

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

export default function DisplayName() {
  return (
    <div className="grid max-w-sm gap-2">
      <Label htmlFor="display-name">Display name</Label>
      <Input id="display-name" name="displayName" autoComplete="nickname" />
    </div>
  );
}

#API reference

#Accessibility

Match htmlFor to a unique control ID. Keep the label visible while the user types. Use a fieldset and legend to name a set of related controls. Do not put unrelated links or buttons inside a label, and do not substitute placeholder text for an actual field name.