Label

Source: packages/shared/components/ui/label.tsx Primitives: @radix-ui/react-label

import { Label } from "@prosper/shared/components/ui/label";

---

Preview

Accept terms and conditions

Default Styling

• Font: text-sm font-medium
• Line height: leading-none
• Layout: flex items-center gap-2 (allows inline icons or hints)
• Disabled state: reduced opacity via group-data-[disabled] and peer-disabled
• User select: select-none

---

Props

Accepts all Radix Label.Root props (extends <label> HTML attributes).

Prop	Type	Default	Description
htmlFor	string	—	Associates with an input by ID
className	string	—	Additional classes

---

Usage Examples

Basic with Input

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" />
</div>

With required indicator

<Label htmlFor="title">
  Job Title <span className="text-destructive">*</span>
</Label>

Uppercase tracking style (ContactPage)

<Label className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
  Full Name
</Label>

---

Used In

• Admin: LoginPage, JobForm
• Landing: ContactPage, job-detail (application form)

---

Notes

• Override in Landing ContactPage: className="text-sm font-medium uppercase tracking-wider text-muted-foreground" applies an all-caps, wide-tracked, muted style for section labels.
• Override in Landing job-detail: className="text-[#3c4047] font-normal cursor-pointer" uses a hardcoded gray color and normal weight for checkbox companion labels. Consider migrating text-[#3c4047] to a semantic token.
• Admin LoginPage and JobForm use the component with default styling (no className overrides).