Label primitive
Headless Label: the behavior, keyboard support and ARIA of its pattern, with no styles.
@ndop/primitives/label
Import
Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Label is built on this one.
import { NdLabel } from '@ndop/primitives/label';Accessibility
Focus
- Clicking the label moves focus to the associated control (native behavior, unchanged).
Right-to-left
Nothing mirrors.
API reference
NdLabel
label[ndLabel]from @ndop/primitives/labelHeadless label. Keeps native label semantics and, when for names an
Ndop form control, such as input[ndInput] or button[ndCheckbox],
mirrors its state as data-disabled and data-invalid, through
NdControlRegistry rather than DOM queries.
Double-clicking the label's own text doesn't select it.
| NdLabel binding | Type | Default |
|---|---|---|
[for]Id of the labelled control. | string | undefined | — |
| Data attribute | Values |
|---|---|
data-disabled | — |
data-invalid | — |