Components
Label

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

PropTypeDefaultDescription
htmlForstring-HTML for attribute