In context
Required + helper text, switch-style settings rows, radio choice list, and a checkbox preference grid — every control wired by htmlFor.
Required + helper
Label, control, helper text, and a tone Badge.
How your name appears on payroll documents.
SSO managed
Managed by your identity provider — contact IT to change.Account preferences
Labels wrapping Switch with proper htmlFor wiring.
Daily digest at 08:00 in your timezone.
Direct messages on approval-blocking events.
Disable parallax, transforms, and decorative animation.
Billing cadence
Radios with associated labels and helper meta.
Notify me about
Checkbox + Label rows with consistent vertical rhythm.
2 of 4 notifications enabled.
With input
import { Label } from '@mihcm/ui/Label';
import { Input } from '@mihcm/ui/Input';
<div className="space-y-1.5">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>Required field
The required prop adds a visual asterisk. Set aria-required on the input separately.
import { Label } from '@mihcm/ui/Label';
import { Input } from '@mihcm/ui/Input';
<div className="space-y-1.5">
<Label htmlFor="name" required>Full name</Label>
<Input id="name" aria-required />
</div>Destructive tone for error state
Must be at least 8 characters.
import { Label } from '@mihcm/ui/Label';
import { Input } from '@mihcm/ui/Input';
<div className="space-y-1.5">
<Label htmlFor="password" tone="destructive">Password</Label>
<Input id="password" type="password" variant="destructive" />
<p className="text-sm text-destructive">Must be at least 8 characters.</p>
</div>