Wensity

Label

An accessible form label with default, required, optional, muted, and inline variants for any field group you build.

labelformfieldrequiredoptionalaccessibilitysettingsdashboard
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>
  );
}

Props

PropTypeDefaultDescription
variant"default" | "required" | "optional" | "muted" | "inline""default"required appends an asterisk, optional a muted suffix, inline sits beside the control.
hintReact.ReactNode-Secondary copy beside the label text, most useful with the inline variant.
disabledbooleanfalseDims the label to match a disabled control.
htmlForstring-Id of the control this label describes. Native attribute, forwarded as-is.