Field Module

The Field module provides a wrapper for form controls, helping manage spacing, label styling, required indicators, help text, error states, and color variations.

Username

This field is required

Username

This field is disabled

Signature:

@mixin use-field($colors: ());

Example:

@include termeh.use-field(("primary", "green"));

Module:

This module is registered as form-field in the presented modules.

Dependencies

Field module uses the following Termeh global var():

Component	Type	Usage	Default
gap → micro	Number	Spacing between blocks	8px
gap → macro	Number	Bottom margin for input blocks	1.6em

---

Field module uses the following Termeh color() and variant():

Color / Variant	Usage	Default
shade → readable	Help block text color	null
primary → readable	Default required indicator color	null
error → readable	Error block text color	null

Modifiers

• .is-required → adds a * to labels for required fields
• .is-disabled / :disabled → applies disabled state to the input
• .is-failed / :invalid → shows error message and applies error styling to children
• .is-<color> → applies a registered color as accent color

Child Elements

• .help → helper text for guidance
• .error → error message displayed on validation failure