Input

Single-line text input with optional leading and trailing icon addons, a tinted background variant, and five semantic width classes. 

CSS variables

Defined on :root in css/_fonts.css. Consumed by css/_input.css and the module's scoped styles.

Variable Theme field Used for
--color-page-bg global_colors.page_color Tinted input background color
--color-table global_colors.table_color Border on leading and trailing icon addon spans
--color-body global_colors.body_color SVG fill for icons inside addon spans

Default

Plain text input without icon addons or tinted background. Use for inline editing of titles, names, or values where the input should feel lightweight and undecorated.

With icon addons

Leading icon (left) and trailing icon (right) appear as inline addons flanking the text field. The addon borders use --color-table and icon fills use --color-body.

Tinted

The add_color toggle applies --color-page-bg as the input background, making it read as embedded within the surrounding surface rather than floating above it. Combine with icon addons as needed.

Width variants

Five semantic width classes. Each class constrains the .input-group via max-width (or width: 100% for w-full). The module adds the chosen class to its outer .input wrapper automatically.

 

Class reference

Class Max width Typical use
w-xs 160 px Short codes, numeric IDs, status abbreviations, currency amounts
w-sm 240 px First name, last name, date picker, short search bar
w-md 380 px Email address, full name, journey title — default
w-lg 560 px URL, slug, multi-word descriptive label, expanded search
w-full 100 % Full-width fields, responsive forms, grid-based layouts

 

Developer usage

Apply the width class to any element that wraps a Bootstrap .input-group. The CSS selector is .input.{class} .input-group, so the immediate parent of the group must carry both input and the size modifier:

 

w-xs — 160 px max

w-sm — 240 px max

w-md — 380 px max (default)

w-lg — 560 px max

w-full — 100% of container