Label overview

label[tngLabel] keeps native label semantics while adding predictable data hooks for required and disabled styling. It works equally well with explicit for/id wiring or wrapped controls.

• Native click-to-focus behavior stays on the browser label element.
• data-slot, data-required, and data-disabled are emitted for styling.
• You keep full ownership of surrounding field layout, helper copy, and required messaging.

Installation

Import the headless directive when you want to own both markup and styling.

import { TngLabel } from '@tailng-ui/primitives';

Basic usage

Prefer explicit for/id for form fields and wrapped labels for compact checkbox rows.

<label tngLabel for="workspace-name">Workspace name</label>
<input id="workspace-name" type="text" />

<label tngLabel>
  <input type="checkbox" />
  Send release alerts
</label>

Accessibility baseline

• Use for/id when the label and control are separate siblings.
• If a label is marked required, keep aria-required or native required on the control.
• Use disabled on the control itself; data-disabled on the label is only a visual hook.