API reference
Headless input group is primitive-first. Use tngInputGroup to own the grouped shell structure, project exactly one control, and style the result through slot and state attributes.
tngInputGroup (primitive shell)
Wraps a single projected control with optional tngPrefix and tngSuffix content. The primitive renders the leading, control, and trailing regions for you and mirrors control state back to the host.
Grouped search field
html
<tng-input-group>
<span tngPrefix aria-hidden="true">Search</span>
<input tngInput type="search" placeholder="Search docs..." />
<button tngSuffix type="button" aria-label="Clear search">Clear</button>
</tng-input-group>
| Input | Type | Details |
|---|---|---|
hasLeading | boolean-like | Overrides automatic prefix-slot detection. |
hasTrailing | boolean-like | Overrides automatic suffix-slot detection. |
disabled | boolean-like | Overrides the mirrored disabled state on the group host. |
invalid | boolean-like | Overrides the mirrored invalid state on the group host. |
readonly | boolean-like | Overrides the mirrored readonly state on the group host. |
controlCount | number | null | Dev-mode override for the single-control validation warning. |
Projected control contract
The group is just the shell. You still project the real control yourself, and the expected control count is one.
Projected control contract
html
<tng-input-group>
<input tngInput type="text" />
</tng-input-group>
<tng-input-group>
<textarea tngTextarea rows="4"></textarea>
</tng-input-group>
| Feature | Type | Details |
|---|---|---|
| Projected control | input[tngInput], textarea[tngInput], or textarea[tngTextarea] | The projected control keeps native semantics, Angular forms integration, and label wiring. |
| Expected count | Single control | The primitive warns in dev mode when the effective projected control count is not exactly one. |
| Generated structure | Leading / control / trailing regions | The host owns the flex layout for those regions so consumers can focus on visual styling only. |
Reflected attributes
These stable hooks are the public styling surface for the grouped shell and its generated regions.
| Attribute | Applied to | Details |
|---|---|---|
data-slot="input-group" | Group host | Primary styling hook for the shell surface. |
data-focused | Group host | Present while any projected control or action inside the group has focus. |
data-invalid, data-disabled, data-readonly | Group host | Mirrored from the projected control unless explicitly overridden. |
data-has-leading, data-has-trailing | Group host | Added when leading or trailing slot content exists or when the matching override input is set. |
data-slot="input-group-leading", data-slot="input-group-control", data-slot="input-group-trailing" | Generated wrappers | Stable structural hooks for the regions rendered by the primitive. |
data-slot="input" | Projected control | Applied by tngInput or tngTextarea on the real control. |
State selector starter
css
.docs-search-shell[data-slot='input-group'][data-focused] {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.docs-search-shell[data-slot='input-group'][data-invalid] {
border-color: #dc2626;
}
Slot directives
| Directive | Applies to | Adds | Alias | Details |
|---|---|---|---|---|
tngPrefix | Projected leading element | data-slot="input-leading" | tngInputLeading | Marks prefix/adornment content for the leading region. |
tngSuffix | Projected trailing element | data-slot="input-trailing" | tngInputTrailing | Marks suffix text, fixed metadata, or trailing action content. |