Styling contract
Style tngInputGroup through its host selector, mirrored state attributes, and the stable slot attributes rendered by the primitive.
CSS contract table
| Hook | Applied to | Use it for |
|---|---|---|
[data-slot="input-group"] | Group host | Border, background, radius, padding, and focus ring. |
[data-slot="input-group-leading"] | Generated leading region | Optional structural spacing around prefix content. |
[data-slot="input-group-control"] | Generated control region | Structural layout around the projected control when needed. |
[data-slot="input-group-trailing"] | Generated trailing region | Optional structural spacing around suffix or action content. |
[data-slot="input"] | Projected control | Reset browser chrome and tune native control typography. |
[data-slot="input-leading"], [data-slot="input-trailing"] | Projected content | Style prefix, suffix, and trailing action content directly. |
State selectors
The group host mirrors focus, invalid, disabled, readonly, and slot-presence state so the shell can respond without custom event wiring.
State selector starter
css
.docs-workspace-shell[data-slot='input-group'] {
border: 1px solid #cbd5e1;
border-radius: 0.85rem;
padding-inline: 0.9rem;
}
.docs-workspace-shell[data-slot='input-group'][data-focused] {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.docs-workspace-shell[data-slot='input-group'][data-disabled] {
opacity: 0.64;
}
Example shells
Workspace slug shell
A simple grouped field with a fixed suffix is usually enough to show the public styling surface clearly.