Docs/Label

Label

Accessible form label with peer-disabled styling support.

Usage

tsx

1import { Label } from '@storm-ds/ui'
2
3<Label htmlFor="name">Name</Label>

With Input

Full Name

tsx

1<div className="space-y-2">
2  <Label htmlFor="name">Full Name</Label>
3  <Input id="name" placeholder="John Doe" />
4</div>

Disabled State

Disabled Field

tsx

1<div className="space-y-2">
2  <Label htmlFor="disabled-input">Disabled Field</Label>
3  <Input id="disabled-input" disabled placeholder="Can't edit" />
4</div>

Required

Full Name

tsx

1<Label htmlFor="email" required>Email</Label>
2<Input id="email" type="email" placeholder="you@example.com" />

With Description

Bio

Tell us about yourself in a few sentences.

tsx

1<div className="space-y-1">
2  <Label htmlFor="bio">Bio</Label>
3  <p className="text-xs text-storm-muted-foreground">Tell us about yourself in a few sentences.</p>
4  <Textarea id="bio" placeholder="I'm a developer who..." />
5</div>

Props

Prop	Type	Default	Description
htmlFor	string	-	ID of the associated form element
className	string	-	Custom classes
required	boolean	false	Shows red asterisk

Use with AI

Create a Next.js component using Storm UI's Label. Import: `import { Label } from '@storm-ds/ui'`. Semantic label element with peer-disabled:opacity-50 support. Use htmlFor to associate with inputs. Use `required` prop to show a red asterisk indicating mandatory fields. Example: `<Label htmlFor="email">Email</Label><Input id="email" />`, `<Label htmlFor="name" required>Name</Label>`

NativeSelect

Checkbox