Label

Accessible label for form controls.

Usage

<w-label for="my-input">
  <label>Email address</label>
</w-label>
<input id="my-input" type="email" />

Props

Prop	Type	Default	Description
for	string	""	ID of the labeled control
required	boolean	false	Show required indicator
disabled	boolean	false	Style as disabled

Slots

Slot	Element	Description
(default)	Label	Label text content

Examples

With Custom Component

<w-label for="my-spinbutton">
  <label>Quantity</label>
</w-label>
<w-spinbutton id="my-spinbutton" label="Quantity"> ... </w-spinbutton>

Required Field

<w-label for="name" required>
  <label>Name</label>
</w-label>
<input id="name" required />

Styling

State is exposed via host attributes ([required], [disabled]).

w-label {
  cursor: pointer;
}
w-label[required]::after {
  content: " *";
  color: red;
}
w-label[disabled] {
  cursor: not-allowed;
}
w-label[disabled] > label {
  color: #999;
}

Selector	Targets
w-label[required]	Required field labels
w-label[disabled]	Disabled labels
w-label[for]	Labels with explicit for reference

Accessibility

• Clicking label focuses the associated control
• Works with both native inputs and custom components
• Properly associates via for attribute