Form Field
<tng-form-field> is the component shell for one projected input[tngInput] or textarea[tngInput] plus optional tngPrefix/tngSuffix 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 form 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 form-field composition across plain CSS and Tailwind CSS while styling only through the host token contract.
Form Field (Plain-CSS)
Form 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
ts
import { TngFormFieldComponent } from '@tailng-ui/components';
import { TngIcon } from '@tailng-ui/icons';
import { TngInput, TngPrefix, TngSuffix } from '@tailng-ui/primitives';
Basic composition
Minimal shell
Minimal form field
html
<tng-form-field>
<input tngInput type="text" placeholder="Search docs" />
</tng-form-field>
Search field with slots
Search field
html
<tng-form-field>
<span tngPrefix aria-hidden="true">
<tng-icon icon="search"></tng-icon>
</span>
<input tngInput type="search" placeholder="Search components..." />
<span tngSuffix aria-hidden="true">Ctrl+K</span>
</tng-form-field>
Relationship to input component
<tng-input> is still the better fit when the field is just a plain control. Choose <tng-form-field> once the shell needs projected prefix or suffix content.
Choose the right component
html
<tng-input type="text" placeholder="Display name" ariaLabel="Display name"></tng-input>
<!-- Reach for tng-form-field when the shell needs projected content -->
<tng-form-field>
<span tngPrefix aria-hidden="true">
<tng-icon icon="search"></tng-icon>
</span>
<input tngInput type="search" placeholder="Search components..." />
<span tngSuffix aria-hidden="true">Ctrl+K</span>
</tng-form-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
html
<label for="docs-search">Search docs</label>
<tng-form-field>
<span tngPrefix aria-hidden="true">
<tng-icon icon="search"></tng-icon>
</span>
<input id="docs-search" tngInput type="search" />
<button tngSuffix type="button" aria-label="Clear search">Clear</button>
</tng-form-field>