Components
Label
Accessible form label component with consistent typography.
Label
Accessible label component for form controls with consistent styling.
Import
import { Label } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
.tsx
<div className="space-y-2">
<Label htmlFor="email">Email address</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>With Required Indicator
Required Field
.tsx
<Label htmlFor="name">
Full Name <span className="text-destructive">*</span>
</Label>Disabled State
Disabled
.tsx
<div className="space-y-2 opacity-50">
<Label htmlFor="disabled-input">Disabled field</Label>
<Input id="disabled-input" disabled placeholder="Cannot edit" />
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | — | ID of the associated form control |
className | string | — | Additional CSS classes |
children | ReactNode | — | Label text |