Input Field
<tng-input-field> is the component shell for one projected input[tngInput] or textarea[tngInput] plus optional tngInputFieldPrefix/tngInputFieldSuffix content.
Reach for it when the field needs icons, fixed helper text, or trailing actions while the shared TailNG shell keeps border, spacing, and focus treatment consistent.
What input field does
- Owns the shell: the component applies the shared input chrome and density model.
- Projects one real control: the native input or textarea still comes from
tngInput. - Keeps adornments outside the input: prefix and suffix content share the same shell without custom layout glue.
Simple examples
Compare the same input-field composition across plain CSS and Tailwind CSS while styling only through the host token contract.
Input Field (Plain-CSS)
Input Field (Tailwind CSS)
Installation
Import the shell component from components and the projected input primitives from primitives. Bring in icons only when the field actually renders icon content.
Imports
import { TngInputFieldComponent } from '@tailng-ui/components';
import { TngIcon } from '@tailng-ui/icons';
import { TngInput, TngInputFieldPrefix, TngInputFieldSuffix } from '@tailng-ui/primitives';
Basic composition
Minimal shell
Minimal input field
<tng-input-field>
<input tngInput type="text" placeholder="Search docs" />
</tng-input-field>
Search field with slots
Search field
<tng-input-field>
<span tngInputFieldPrefix aria-hidden="true">
<tng-icon icon="search"></tng-icon>
</span>
<input tngInput type="search" placeholder="Search components..." />
<span tngInputFieldSuffix aria-hidden="true">Ctrl+K</span>
</tng-input-field>
Relationship to input component
<tng-input> is still the better fit when the field is just a plain control. Choose <tng-input-field> once the shell needs projected prefix or suffix content.
Choose the right component
<tng-input type="text" placeholder="Display name" ariaLabel="Display name"></tng-input>
<!-- Reach for tng-input-field when the shell needs projected content -->
<tng-input-field>
<span tngInputFieldPrefix aria-hidden="true">
<tng-icon icon="search"></tng-icon>
</span>
<input tngInput type="search" placeholder="Search components..." />
<span tngInputFieldSuffix aria-hidden="true">Ctrl+K</span>
</tng-input-field>
Accessibility guidance
- Give the projected input or textarea a real accessible name with a label or ARIA.
- Mark decorative prefix and suffix content as
aria-hidden="true". - Trailing buttons should keep their own explicit accessible labels.
Accessible composition
<label for="docs-search">Search docs</label>
<tng-input-field>
<span tngInputFieldPrefix aria-hidden="true">
<tng-icon icon="search"></tng-icon>
</span>
<input id="docs-search" tngInput type="search" />
<button tngInputFieldSuffix type="button" aria-label="Clear search">Clear</button>
</tng-input-field>