Label

A label component that can be associated with form inputs using the for attribute.

Examples

Default

Accept terms and conditions 
<div class="flex items-center gap-2">
  <c-checkbox id="terms"></c-checkbox>
  <c-label label-for="terms">Accept terms and conditions</c-label>
</div>

With Radio Group

Option 1
Option 2
Option 3 
<c-radio-group value="option-1" radio-group-classes="flex flex-col gap-3">
  <div class="flex items-center gap-2">
    <c-radio-group-item id="option-1" value="option-1"></c-radio-group-item>
    <c-label label-for="option-1">Option 1</c-label>
  </div>
  <div class="flex items-center gap-2">
    <c-radio-group-item id="option-2" value="option-2"></c-radio-group-item>
    <c-label label-for="option-2">Option 2</c-label>
  </div>
  <div class="flex items-center gap-2">
    <c-radio-group-item id="option-3" value="option-3"></c-radio-group-item>
    <c-label label-for="option-3">Option 3</c-label>
  </div>
</c-radio-group>

With Text Input

Email address 
<div class="flex flex-col gap-2">
  <c-label label-for="email">Email address</c-label>
  <c-input id="email" type="email" placeholder="you@example.com"></c-input>
</div>

API Reference

Label

A label component that provides accessible labeling for form inputs and can toggle checkboxes/radio buttons when clicked.

Prop Type Default Description
for string '' The ID of the input element this label is associated with. When clicked, checkboxes and radio buttons will toggle, while other inputs will receive focus.
label-classes string '' Additional CSS classes to apply to the label element.

Features

  • Accessible: Uses semantic <label> element for proper form accessibility
  • Interactive: Clicking the label toggles checkboxes/radio buttons or focuses text inputs
  • Customizable: Accepts additional classes via label-classes prop
  • Peer-aware: Includes peer-disabled: variants for styling based on associated input state
  • Mobile support: Uses both click and touchend so label taps work on mobile browsers where click may not fire

Implementation Notes

Label activation uses a message bus (not native label[for]) so it works across Shadow DOM boundaries (e.g. Salesforce LWR, nested components). Form controls subscribe to LABEL_ACTIVATE and match by id. A 300ms debounce prevents double-firing when both touchend and click fire on the same tap.