Label

The Label component provides you with form labels and descriptions.

Live Examples

Live Example

☀️

Copy

View Code

import { Label, Input, HelperText } from '@jarllyng/nostromo' export default function LabelExample() { return ( <div className="w-full max-w-sm space-y-6"> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="you@example.com" /> </div>...

Import


import { Label } from "@jarllyng/nostromo";
// or
import { Label } from "@jarllyng/nostromo/label";

Usage


import { Label, Input } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" />
    </div>
  );
}

With Checkbox

Live Example

☀️

Copy

View Code

import { Label, Checkbox } from '@jarllyng/nostromo' 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	Required	Description
`htmlFor`	`string`	`undefined`	No	ID of the form control this label is for
`variant`	`"default" \| "muted" \| "error"`	`"default"`	No	Visual variant
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the label
`weight`	`"normal" \| "medium" \| "semibold" \| "bold"`	`"medium"`	No	Font weight
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Label content

Standard HTML Label Props

The Label component extends React.LabelHTMLAttributes<HTMLLabelElement>, so it accepts all standard HTML label attributes (e.g., id, data-*, aria-*).