Input

A single-line text input with sizes, color and visual variants, validation states, prefix/suffix slots and a clearable button. Toggle Vue / CSS to switch the live demo and source together.

Basic

Default text input with label, placeholder and helper text.

Vue SFC

Types

text, email, password, number, tel, url, date, time and search.

Vue SFC

Sizes

Small, medium and large.

Vue SFC

Variants

outlined, filled and underlined.

underlined focuses with a soft glow under the line rather than a ring around the field — tune it with --mono-input-underline-glow (default 0 5px 6px -6px).

Vue SFC

Colors

All built-in color variants.

Vue SFC

States

Disabled, readonly and required.

Vue SFC

Validation

valid, invalid and warning states with messages.

Vue SFC

Prefix & suffix

Icon or text on either side of the native input.

Vue SFC

Clearable

Clear button shown when the value is non-empty.

Vue SFC

Event log

Live log of mno-input, mno-change and mno-clear events.

Vue SFC

Customized

Override per-element styling with the cssClass prop (Vue) or extra utility classes (CSS).

Vue SFC

Width & height

Set width, height, min-width, max-width, min-height or max-height — each takes a CSS string ("260px", "80%") or a number (px). Fields are full width by default; set width to constrain.

Vue SFC

CSS Variables

Vue SFC

Every input is themed through --mono-input-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-input> and the shadow build. The color prop sets the focus accent, but an explicit --mono-input-focus-color override always wins. To re-skin globally, set the underlying --theme-* tokens.

Variable	Default	Controls
--mono-input-focus-color	--theme-primary	Focus / hover border color (set by color)
--mono-input-focus-rgb	primary rgb	Focus ring color (as r, g, b)
--mono-input-underline-glow	0 5px 6px -6px	Underlined focus glow geometry
--mono-input-color	--theme-text	Field text color
--mono-input-border-color	--theme-border	Field border color
--mono-input-bg	--theme-surface	Field background
--mono-input-placeholder	--theme-placeholder	Placeholder color
--mono-input-shadow	0 1px 2px …	Field shadow
--mono-input-radius-md	--theme-radius-md	Corner radius (also -sm / -lg)
--mono-input-height-md	--theme-control-height-md (2.25rem)	Field height (one per step: -xs … -xxl)
--mono-input-valid	--theme-success	Valid-state color
--mono-input-invalid	--theme-danger	Invalid-state color
--mono-input-warning	--theme-warning	Warning-state color

Types

Importimport { InputProps } from 'mono-helper'

Prop	Value	Default	Description
type	'number' | 'date' | 'time' | 'text' | 'email' | 'password' | 'tel' | 'url' | 'month' | 'week' | 'search'	—	Native input type controlling the field's behavior and keyboard.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Visual size of the input field.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	—	Theme color applied to focus, borders, and accents.
variant	'underlined' | 'outlined' | 'filled'	—	Visual style of the field (outlined, filled, or underlined).
placeholder	string	—	Placeholder text shown when the field is empty.
value	string | number	—	Current input value.
name	string	—	Form field name submitted with the input.
modelValue	string	—	Two-way bound value for v-model-style usage.
disabled	boolean	—	Disables interaction and dims the field.
readonly	boolean	—	Makes the field read-only while still focusable.
clearable	boolean	—	Shows a clear button when the field has a value.
required	boolean	—	Marks the field as required and shows a required indicator.
autofocus	boolean	—	Focuses the field automatically on first render.
label	string	—	Label text displayed above the field.
helperText	string	—	Helper text shown below the field.
validationState	'warning' | 'default' | 'valid' | 'invalid'	—	Explicit validation state for styling and messaging.
validationMessage	string	—	Validation message shown below the field.
error	boolean	—	Marks the field in an error state.
errorMessage	string	—	Error message shown below the field.
success	boolean	—	Marks the field in a success state.
successMessage	string	—	Success message shown below the field.
ariaLabelText	string	—	Accessible label for the input element.
ariaLabel	string	—	Shorter alias for the accessible label.
minLength	number	—	Minimum allowed input length.
maxLength	number	—	Maximum allowed input length.
min	string | number	—	Minimum value for numeric or date inputs.
max	string | number	—	Maximum value for numeric or date inputs.
step	string | number	—	Step increment for numeric or date inputs.
pattern	string	—	Validation pattern the value must match.
autocomplete	string	—	Native autocomplete hint for the field.
inputmode	string	—	Native inputmode hint for the on-screen keyboard.
width	string | number	—	Explicit sizing. Each accepts a CSS length string (`"320px"`, `"80%"`) or a number (interpreted as px). Use `width="100%"` for a full-width field.
height	string | number	—	—
minWidth	string | number	—	—
maxWidth	string | number	—	—
minHeight	string | number	—	—
maxHeight	string | number	—	—
cssClass	InputCssClass	—	Per-part class overrides for internal elements.
visible	boolean	—	Whether the control is shown. Defaults to `true`.
visibleType	'invisible' | 'none'	—	How it hides when `visible` is `false`. Defaults to `'none'`.