Field label

Label, description, and error treatment stacked above a form control.

Project name

Shown on invoices and in the client portal.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/field-label.json

Usage

Render the label block above any control and wire `htmlFor` to the control's id.

TSImport

import { FieldLabel } from "@/components/ui/field-label";

TSExample

import { FieldLabel } from "@/components/ui/field-label";
import { Input } from "@/components/ui/input";

export function Example() {
  return (
    <div className="flex flex-col gap-1.5">
      <FieldLabel
        htmlFor="project-name"
        label="Project name"
        caption="Shown on invoices and in the client portal."
        required
      />
      <Input id="project-name" placeholder="Acme rebrand" />
    </div>
  );
}

Composition

Anatomy of the FieldLabel primitive.

FieldLabel                       (single component — pass everything as props)
├── label={<ReactNode>}          (required — the visible label text)
├── caption={<ReactNode>}        (optional helper text under the label)
├── required={boolean}           (renders a red asterisk after the label)
├── error={boolean}              (reddens the label — render the message below the control)
├── disabled={boolean}           (softens label / caption color)
└── htmlFor={string}             (wires <label htmlFor> to the control id)

Default

Just the label — paired above any control.

Project name

Required

Adds a red asterisk after the label.

Project name *

With caption

Helper text sits directly under the label, above the control.

Project name

Shown on invoices and in the client portal.

Error

Reddens the label and renders the error message under the description.

Project name *

Shown on invoices and in the client portal.

Project name is required.

API Reference

Props exposed by the FieldLabel component.

Prop	Type	Default	Description
`label`	ReactNode	—	Visible label text rendered above the control.
`caption`	ReactNode	—	Helper text rendered directly under the label (not under the control).
`required`	boolean	false	Renders a red asterisk after the label.
`error`	boolean	false	Marks the field invalid — reddens the label. Render the error message below the control.
`disabled`	boolean	false	Softens the label / caption color.
`htmlFor`	string	—	Wires the underlying `<label htmlFor>` to the control's id.
`className`	string	—	Override or extend the wrapper classes.