Input primitive
Headless Input: the behavior, keyboard support and ARIA of its pattern, with no styles.
@ndop/primitives/input
Import
Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Input is built on this one.
import { NdInput } from '@ndop/primitives/input';Accessibility
Focus
- Unchanged from the native input. Focusing it and leaving it marks the bound field touched, through the forms library.
Right-to-left
Text direction follows the document or the element's dir; Ndop changes nothing.
API reference
NdInput
input[ndInput], textarea[ndInput]role nativefrom @ndop/primitives/inputHeadless text input, on an input or a textarea. Forms own the value: Signal Forms ([formField]) or
reactive and template-driven forms bind the native input directly, and Ndop
adds no value accessor (ADR-0004, amendment 1). The directive reads the
bound field's state and reflects it:
- aria-invalid="true" and data-invalid while invalid, meaning the
invalid input is set, or the field is invalid and touched;
- data-disabled while the input is disabled.
With an id, it publishes that state for a label[ndLabel] pointing at
it. Inside a form field ([ndField]), its aria-describedby lists the
field's description and, while invalid, its error.
Manages aria-invalid, aria-describedby.
| NdInput binding | Type | Default |
|---|---|---|
[id]Element id; also the key a label[ndLabel] uses to find this input. | string | undefined | — |
[invalid]Marks the input invalid when no forms library is bound; with one, the
field's state decides. | boolean | false |
| Data attribute | Values |
|---|---|
data-invalid | — |
data-disabled | — |