Form Field Styling
Slot Classes
The slot input lets app code add classes to the root, label, control row, control, messages, and required marker without replacing accessibility wiring.
Slot classes
html
<tng-form-field
[slot]="{
root: 'docs-field',
label: 'docs-field-label',
controlRow: 'docs-field-control-row',
messages: 'docs-field-messages'
}"
>
<tng-label forId="slug">Slug</tng-label>
<input tngInput id="slug" />
<p tngHint>Used in public URLs.</p>
</tng-form-field>
CSS Variables
The theme contract exposes field-level variables for spacing, label text, adornments, message text, and required marker color.
Token overrides
css
.docs-field {
--tng-form-field-gap: 0.6rem;
--tng-form-field-label-fg: var(--tng-semantic-foreground-primary);
--tng-form-field-message-fg: var(--tng-semantic-foreground-secondary);
}