Label

Overview

Label renders a semantic <label> element for form inputs. It supports required field indicators and disabled states while maintaining accessibility through proper htmlFor association.

Email Address

Username *

Choose a unique username.

Usage


export function Example() {
  return (
    <>
      <Label htmlFor="email">Email</Label>
      <input id="email" type="email" />
    </>
  );
}

Required

<Label htmlFor="email" required>Email Address</Label>

Sizes

<Label htmlFor="a" size="sm">Small label</Label>
<Label htmlFor="b" size="md">Medium label (default)</Label>

Accessibility

Always renders a <label> element
htmlFor must match the associated input's id
When required, appends a visual * and screen-reader-only "required" text

API Reference

Prop	Type	Default	Description
`htmlFor`	`string`	—	ID of the associated input (required)
`required`	`boolean`	`false`	Shows required indicator
`disabled`	`boolean`	`false`	Applies muted styling
`size`	`'sm' \| 'md'`	`'md'`	Label size
`className`	`string`	—	Additional CSS classes

Component	When to Use Instead
Text	For general text content
Heading	For headings and titles