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.

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

Types

Importimport { InputProps } from 'mono-helper'

Prop	Value	Default	Description
type	'number' | 'date' | 'time' | 'text' | 'email' | 'password' | 'tel' | 'url' | 'month' | 'week' | 'search'	'text'	Native input type controlling the field's behavior and keyboard.
size	'sm' | 'md' | 'lg'	'md'	Visual size of the input field.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	'primary'	Theme color applied to focus, borders, and accents.
variant	'underlined' | 'outlined' | 'filled'	'outlined'	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	false	Disables interaction and dims the field.
readonly	boolean	false	Makes the field read-only while still focusable.
clearable	boolean	false	Shows a clear button when the field has a value.
required	boolean	false	Marks the field as required and shows a required indicator.
autofocus	boolean	false	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'	'default'	Explicit validation state for styling and messaging.
validationMessage	string	''	Validation message shown below the field.
error	boolean	false	Marks the field in an error state.
errorMessage	string	''	Error message shown below the field.
success	boolean	false	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.