Input

The input component is a wrapper to the HTML input element. It accepts most of the same properties as the HTML input and integrates with the keyboard on mobile devices.

Examples

Basic Usage

<Mdx-input label="Input" />

Types

The input component is meant for text type inputs only, such as "text", "password", "email", "number", "search", "tel", and "url". It supports all standard text input events including keyup, keydown, keypress, and more. The default type is "text".

<Mdx-input label="Text input" placeholder="Enter text" />

<br />

<Mdx-input label="Number input" type="number" placeholder="000" />

<br />

<Mdx-input label="Password input" type="password" placeholder="password" />

<br />

<Mdx-input label="Email input" type="email" placeholder="email@domain.com" />

<br />

<Mdx-input label="Telephone input" type="tel" placeholder="888-888-8888" />

End Icon

The iconEnd component property can be used to place icon on the end side of the input.

<Mdx-input iconEnd="endIcon" label="End icon" />

Validations

You can add validations by using Vuelidate value for v-model. Validations will be automatically parsed from v$

<Mdx-input v-model="v$.variable" label="Input" />

Properties

v-model

Description	You can pass simple variable to v-model as well as Vueliade v$.variable to enabling validations
Type	"Object" | "String" | "null"
Required	true

label

Description	The visible label associated with the input.
Type	String
Required	true

disabled

Description	If true, the user cannot interact with the input.
Type	Boolean
Default	false

size

Description	The height of the input.
Type	"small" | "default"
Default	default

types

Description	The type of the input.
Type	"text" | "password" | "email" | "number" | "search" | "tel" | "url"
Default	text