Label
The Label component provides you with form labels and descriptions.
Live Examples
Storybook: components-form-label--default
Storybook: components-form-label--required
Storybook: components-form-label--form-example
Code Examples
import { Label } from '@nostromo/ui-core'
export default function LabelExample() {
return (
<div className="space-y-4">
<div>
<Label htmlFor="email">Email</Label>
<input id="email" type="email" className="mt-1" />
</div>
<div>
<Label htmlFor="password">Password</Label>
<input id="password" type="password" className="mt-1" />
</div>
</div>
)
}With Checkbox
import { Label, Checkbox } from '@nostromo/ui-core'
export default function LabelWithCheckbox() {
return (
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | - | HTML for attribute |