Input Module

The Input module provides styled input wrappers with configurable gaps, colors, border, background, placeholder styling, focus/disabled/error states, and optional shake animation.

Primary Input:

A

B

This is a help block

Invalid Input:

A

B

This is a error block

Disabled Input:

A

B

Signature:

@mixin use-input($gaps: (), $colors: ());

Example:

@include termeh.use-input(("small", "medium"), ("primary", "green"));

Module:

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

Dependencies

Input module uses the following Termeh global var():

Component	Type	Usage	Default
base → separator	Color	Fallback border color	null
radius → normal	Number	Default input border radius	null
input → height	Number	Input height	2.8em
input → border	Color	Default input border color	FALLBACK
input → placeholder	Color	Default input placeholder color	FALLBACK
input → background	Color	Default input background color	white

---

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

Color / Variant	Usage	Default
error	Accent color for invalid state	error
primary	Default accent color	error
shade → mute	Fallback placeholder color	null

Modifiers

• .is-focused / :focus-within → applies focus styling
• .is-invalid / :invalid → applies error styling with shake animation
• .is-disabled / :disabled → applies disabled styling
• .is-<gap>-gap → applies a registered gap as spacing
• .is-<color> → applies a registered color as accent color

Child Elements

• <input> → the main input field, fills available space by default
• .divider → vertical line separating input sections
• .gutter → spacing element inside the input container