Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { Label } from '@marmoui/ui';Examples
Basic Label
With Input
Label associated with a text input
<div className="flex flex-col gap-1.5">
<Label htmlFor="email">Email address</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>Best Practices
✓
Always pair labels with inputs
Every form input should have an associated label using the htmlFor attribute.
✓
Keep labels concise
Use clear, short labels that describe the expected input.
✗
Don't hide labels
Visible labels are essential for usability. Avoid visually hiding labels in favor of placeholders.
✗
Don't use labels for instructions
Keep labels brief. Use helper text for additional guidance.
Props
Props
Accessibility
- Clicking the label focuses the associated input.
- Screen readers announce the label when the input receives focus.
- Uses the native
<label>element for maximum compatibility.