Label

"use client";

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

export default function Example() {
  const id = useId();
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor={id}>Workspace name</Label>
      <Input id={id} name="workspace" />
    </div>
  );
}

Installation

pnpm dlx shadcn@4.18.0 add @siteplane/label

For this page’s examples, also install:

pnpm dlx shadcn@4.18.0 add @siteplane/checkbox @siteplane/input

Usage

import { Label } from "@/siteplane/components/label";

<Label htmlFor="workspace">Workspace name</Label>;

Required fields and help

Label marks nothing as required and connects no help text. Compose a Field for both: requiredIndicator marks its label while the control is required, and the Field connects a FieldDescription to the control.

"use client";

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/siteplane/components/field";
import { Input } from "@/siteplane/components/input";

export default function Example() {
  return (
    <Field className="w-full max-w-sm" name="email" requiredIndicator>
      <FieldLabel>Contact email</FieldLabel>
      <Input required type="email" />
      <FieldDescription>Used for account notifications.</FieldDescription>
    </Field>
  );
}

With a checkbox

Wrap a Checkbox and its text in Label so clicking the text toggles it. The checkbox sits on the first line of the text, also when the text wraps. Label adds no validation.

A label above a field uses the 16 px line of FieldLabel. A label beside a checkbox, radio or switch keeps the 21 px body line, because such labels are sentences and often wrap.

"use client";

import { Checkbox } from "@/siteplane/components/checkbox";
import { Label } from "@/siteplane/components/label";

export default function Example() {
  return (
    <Label>
      <Checkbox name="terms" />
      Accept terms and conditions
    </Label>
  );
}

Choice cards

Use variant="card" around a Checkbox, Radio or Switch. Label owns the shared border, padding, hover, checked and disabled presentation; do not copy these state classes into your own components. Keep secondary action buttons outside the label.

API reference

Remaining props and refs follow the native label and Base UI composition. Label adds no validation or control state. It dims as disabled when it carries data-disabled or holds a disabled form control, such as an input, a textarea, a Select trigger, a checkbox or the segments of a date field. A disabled button inside it does not dim it. There is no owned disabled prop.

Read the installed source.

Usage notes

Use Field and FieldLabel when automatic field association and validation are needed. Label and FieldLabel are distinct components. Clicking a native associated label focuses or activates its control.