Inputs

Label

A text label for a form control. Inside forms, use FieldLabel, which links itself.

npx prodular-ui add label

Default

Company name

import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"
export default function LabelDefault() {  return (    <div className="flex w-full max-w-xs flex-col gap-2">      <Label htmlFor="label-company">Company name</Label>      <Input id="label-company" placeholder="Northbeam Studio" />    </div>  )}

With a checkbox or switch

A disabled control dims its label through the peer selector.

Accept the data processing agreement

Join the beta channel

Export raw events (Scale plan)

import { Checkbox } from "@/components/ui/checkbox"import { Label } from "@/components/ui/label"import { Switch } from "@/components/ui/switch"
export default function LabelWithControl() {  return (    <div className="flex flex-col gap-4">      <div className="flex items-center gap-2">        <Checkbox id="label-terms" />        <Label htmlFor="label-terms">Accept the data processing agreement</Label>      </div>      <div className="flex items-center gap-2">        <Switch id="label-beta" defaultChecked />        <Label htmlFor="label-beta">Join the beta channel</Label>      </div>      <div className="flex items-center gap-2">        <Checkbox id="label-locked" disabled />        <Label htmlFor="label-locked">Export raw events (Scale plan)</Label>      </div>    </div>  )}

Anatomy

<Label htmlFor="company">Company name</Label><Input id="company" />

Guidance

Use it when

Labelling a control outside a Field, for example in a toolbar or a custom layout.

Avoid

Labels inside forms built with Field. Use FieldLabel.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Always pass htmlFor matching the control id.
Place Label right after a Checkbox or Switch so peer-disabled dims it.
Labels are 14px medium and sentence case. Do not add uppercase or tracking.

API

Label

Prop	Type	Default	Description
htmlFor	string		The id of the control it labels.