API reference
Headless input is primitive-first. Attach directives to native controls, use tngInputGroup for grouped composition, and style through slot/state attributes while the primitive owns the base structural layout.
tngInput (directive)
Attach to a native input[tngInput]. Textarea usage is documented on the dedicated Textarea page.
Directive attachment
<input tngInput type="text" />
| Property | Type | Details |
|---|---|---|
ariaLabel, ariaLabelledby, ariaDescribedBy | string | null | Reflected to native ARIA attributes with whitespace-normalization. |
ariaInvalid, ariaRequired | boolean-like | ARIA/state hooks layered on top of the native control. |
disabled, readonly, required | boolean-like | Reflects the native state and emits matching data attributes. |
data-slot="input" | output attribute | Stable styling hook for the control itself. |
tngInputGroup (primitive shell)
Wraps a single projected tngInput control with optional tngPrefix/tngSuffix slots and provides the base structural layout for leading, control, and trailing regions.
Grouped search input
A headless search field with a search-icon prefix and a clear-action suffix.
Grouped search input (Plain-CSS)
Grouped search input (Tailwind CSS)
| Feature | Type | Details |
|---|---|---|
| Projected control contract | tngInput projection rule | Expects exactly one projected tngInput control. |
| Structural layout | Built-in group behavior | Provides the base horizontal layout for optional leading, flexible control, and optional trailing regions. |
| Conditional wrappers | Render behavior | Leading/control/trailing wrappers are generated by the primitive. Leading and trailing regions render only when matching slot content exists; the control region always renders. |
data-focused | State attribute | Applied on group host while any projected element is focused. |
data-disabled, data-invalid, data-readonly | Mirrored state attributes | Reflected from the projected control onto the group host for container-level styling. |
data-slot="input-group" | Output attribute | Stable styling hook for the group host. |
data-slot="input-group-leading", data-slot="input-group-control", data-slot="input-group-trailing" | Output attributes | Stable structural hooks for the generated group regions. These regions are laid out by the primitive and may be styled optionally by consumers. |
Consumers should style the visual appearance of the group surface and projected content. The primitive owns the internal leading/control/trailing layout, so deep selectors are not required for standard grouped composition.
Slot directives
| Directive | Applies to | Adds | Details |
|---|---|---|---|
tngPrefix | Projected leading element | data-slot="input-leading" | Marks prefix/adornment content projected into the group’s leading region. |
tngSuffix | Projected trailing element | data-slot="input-trailing" | Marks suffix/action content projected into the group’s trailing region. |