Label

A polished label primitive for forms, settings, and field groups.

Loading preview...

Examples

Practical examples and common states for the same installable component.

Default

Standard block label for stacked form fields.

Requires: input

examples/label-default.tsx
import { Label } from "@/components/wensity/label";
import { Input } from "@/components/wensity/input";
export function LabelDefault() {
return (
<div>
<Label htmlFor="display-name">Display name</Label>
<Input id="display-name" placeholder="Parth Sharma" />
</div>
);
}

Required

Required indicator stays visible without relying on placeholder copy.

Requires: input

examples/label-required.tsx
import { IconMail } from "@tabler/icons-react";
import { Label } from "@/components/wensity/label";
import { Input } from "@/components/wensity/input";
export function LabelRequired() {
return (
<div>
<Label variant="required" htmlFor="email">
Work email
</Label>
<Input
id="email"
type="email"
placeholder="you@company.com"
leftIcon={<IconMail stroke={1.75} />}
/>
</div>
);
}

Optional

Optional marker for fields that are helpful but not required.

Requires: input

examples/label-optional.tsx
import { Label } from "@/components/wensity/label";
import { Input } from "@/components/wensity/input";
export function LabelOptional() {
return (
<div>
<Label variant="optional" htmlFor="note">
Internal note
</Label>
<Input id="note" placeholder="Only visible to admins" />
</div>
);
}

Muted

Secondary label copy for helper context beneath a primary label.

Requires: input

examples/label-muted.tsx
import { Label } from "@/components/wensity/label";
import { Input } from "@/components/wensity/input";
export function LabelMuted() {
return (
<div>
<Label htmlFor="channels">Notification channels</Label>
<Label variant="muted" htmlFor="channels">
Choose where alerts should land.
</Label>
<Input id="channels" placeholder="Email, push, or SMS" />
</div>
);
}

Inline

Horizontal label rhythm for compact settings rows.

Requires: input

examples/label-inline.tsx
import { IconMail } from "@tabler/icons-react";
import { Label } from "@/components/wensity/label";
import { Input } from "@/components/wensity/input";
export function LabelInline() {
return (
<div className="flex flex-wrap items-center gap-x-4 gap-y-3">
<Label variant="inline" htmlFor="email" hint="Work only">
Email
</Label>
<Input
id="email"
className="min-w-[14rem] flex-1"
placeholder="you@company.com"
leftIcon={<IconMail stroke={1.75} />}
/>
</div>
);
}

Disabled

Disabled labels reduce emphasis while keeping the field readable.

Requires: input

examples/label-disabled.tsx
import { Label } from "@/components/wensity/label";
import { Input } from "@/components/wensity/input";
export function LabelDisabled() {
return (
<div>
<Label variant="required" htmlFor="org-id" disabled>
Organization ID
</Label>
<Input id="org-id" defaultValue="org_8f2k91" disabled />
</div>
);
}