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