Label

1<Label htmlFor="username" required>
2  {formatLabel("Username")}
3</Label>
4<Input id="username" placeholder="Enter username" />

1<Label htmlFor="password" required error>
2  {formatLabel("Password")}
3</Label>
4<Input
5  id="password"
6  type="password"
7  error
8/>
9<p className="text-xs text-destructive">
10  Password must be at least 12 characters
11</p>

1<div className="flex items-center gap-2">
2  <Checkbox id="terms" />
3  <Label htmlFor="terms">{formatLabel("Accept terms and conditions")}</Label>
4</div>

1<div className="flex items-center justify-between">
2  <Label htmlFor="notifications">{formatLabel("Email Notifications")}</Label>
3  <Switch id="notifications" />
4</div>

1<Label htmlFor="disabled">{formatLabel("Disabled Field")}</Label>
2<Input id="disabled" placeholder="Cannot edit" disabled />

1// Label uses design system typography tokens
2// From mode.typography.label
3
4text-sm              // Font size (14px)
5font-semibold        // Font weight 600
6leading-normal       // Line height
7tracking-normal      // Letter spacing

1// UX Heuristic #5: Error Prevention
2// Show required indicator to prevent form submission errors
3
4<Label htmlFor="field" required>
5  Field Name
6</Label>
7
8// Renders: Field Name *
9// User knows field is required before submission