Skip to content

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.

A
B
This is a help block
A
B
This is a error block
A
B

Signature:

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

Example:

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

Input module uses the following Termeh global var():

ComponentTypeUsageDefault
baseseparatorColorFallback border colornull
radiusnormalNumberDefault input border radiusnull
inputheightNumberInput height2.8em
inputborderColorDefault input border colorFALLBACK
inputplaceholderColorDefault input placeholder colorFALLBACK
inputbackgroundColorDefault input background colorwhite

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

Color / VariantUsageDefault
errorAccent color for invalid stateerror
primaryDefault accent colorerror
shademuteFallback placeholder colornull

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