Label

A styled form label with consistent typography. Connects to inputs via the standard htmlFor attribute.

$npx shadcn add @patchui/label

Basic Label

Email address

With Input

Usage

import { Label } from "@patchui/react";
 
// Basic
<Label>Email address</Label>
 
// With an input
<Label htmlFor="email">Email</Label>
<input id="email" type="email" />
 
// As a different element (polymorphic render prop)
<Label render={<span />}>Read-only label</Label>

Props

Prop	Type	Default	Description
render	RenderProp<'label'>	-	Polymorphic render prop - pass a different element to change the rendered tag while keeping label styles.
className	string	-	Additional CSS classes to apply.
htmlFor	string	-	The id of the form element this label is associated with.

Notes

Typography: Renders as text-xs font-medium with muted tertiary text color, matching the design system's form label style.
Polymorphic rendering: Use the render prop to render as a <span> or other element when you need label styling without the semantic <label> tag.
Accessibility: Always pair with htmlFor pointing to the input's id to ensure screen readers associate the label with its control.