Neumorphism UI

Label

Use Label to give a form control a visible name and make its text a clickable part of the control.

Preview

Labels for text and settings

Click an email label to focus its input, or use the weekly-report label to toggle its associated switch.

Clicking a label moves focus to its control.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/label

Install the shared base once, then add components and their dependencies with the CLI.

Labels for text and settings

npx shadcn@latest add @neumorphism-ui/input @neumorphism-ui/label @neumorphism-ui/switch
Registry JSON

Usage

Match Label's htmlFor to the control's id. Keep the label visible and use separate supporting text for examples or validation feedback.

"use client";

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

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Project name</Label>
      <Input id={id} name="projectName" />
    </div>
  );
}

API Reference

A thin wrapper around native label that forwards all standard attributes. Provides text color and cursor styles that match the peer-disabled state.

ComponentPropTypeDefaultDescription
LabelhtmlForstring—The id of the form control to associate.
LabelchildrenrequiredReact.ReactNode—Text that describes the purpose of the control.
LabelclassNamestring—Extends layout and state styles.

Accessibility

  • 01

    htmlFor must exactly match the id of the target control.

  • 02

    To name a group of controls such as RadioGroup, use fieldset and legend or aria-labelledby instead of a standalone Label.

  • 03

    Communicate required state and supporting descriptions with required and aria-describedby as well as visual indicators.