Label

A styled form label with required indicator support and accessible htmlFor binding.

AccessibleDark ModeRequired State

Install

$npx react-principles add label

Live Demo

Explore all variants and interactive states in Storybook.

Open Storybookopen_in_new

Email address

Password*

Bio

Disabled field

Code Snippet

src/ui/Label.tsx

import { Label } from "@/ui/Label";

// Basic
<Label>Email address</Label>

// Required
<Label required>Password</Label>

// With input
<div>
  <Label htmlFor="email">Email address</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Copy-Paste (Single File)

Label.tsx

import { forwardRef, type LabelHTMLAttributes } from "react";
import { cn } from "@/lib/utils";

// ─── Types ────────────────────────────────────────────────────────────────────

export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
  required?: boolean;
}

// ─── Component ────────────────────────────────────────────────────────────────

export const Label = forwardRef<HTMLLabelElement, LabelProps>(function LabelRoot(
  { required, className, children, ...rest },
  ref
) {
  return (
    <label
      ref={ref}
      className={cn(
        "font-medium text-slate-700 dark:text-slate-300 text-sm",
        className
      )}
      {...rest}
    >
      {children}
      {required && <span className="text-red-500 dark:text-red-400 ml-1">*</span>}
    </label>
  );
});

Props

Extends all native HTMLLabelElement attributes.

Prop	Type	Default	Description
`required`	`boolean`	`false`	Shows required indicator (asterisk).
`htmlFor`	`string`	`—`	ID of the form element this label is bound to.

React Principles