Label

A form label associated with an input field.

Basic

Use htmlFor to associate the label with an input by its id. Clicking the label focuses the input.

Username

<Label htmlFor="username">Username</Label>
<Input id="username" placeholder="Enter your username" />

Required

Set required to append a red asterisk. The asterisk is aria-hidden so screen readers are not affected — use native HTML required on the input for accessibility.

Email address

Password

<Label htmlFor="email-req" required>Email address</Label>
<Input id="email-req" type="email" placeholder="you@example.com" required />

<Label htmlFor="password-req" required>Password</Label>
<Input id="password-req" type="password" placeholder="••••••••" required />

Props

Prop	Type	Default	Description
`required`	`boolean`	`false`	Appends a red asterisk (aria-hidden) to indicate a required field
`htmlFor`	`string`	—	ID of the associated input element
`className`	`string`	—	Additional Tailwind classes
`children`	`ReactNode`	—	Label text