Input

Basic

The Input component is used for collecting user input. It supports various modes and customization options.

<Input v-model="value"/>

The basic usage of the Input component involves binding a data property using the v-model directive. This directive automatically syncs the input value with the specified data property, allowing for two-way data binding.

Type

The type prop allows you to specify the type of input field. The available types are "text", "number", "email", and "password".

<Input type="text" v-model="value"/>
<Input type="number" v-model="value"/>
<Input type="email" v-model="value"/>
<Input type="password" v-model="value"/>

AutoFocus

The autoFocus prop automatically focuses the input field when the component is mounted.

<Input autoFocus v-model="value"/>

Placeholder

The placeholder prop provides a hint for the expected input by displaying placeholder text within the input field.

<Input placeholder="Enter your text here" v-model="value"/>

Autocomplete

The autocomplete prop controls the browser's autocomplete feature. It can be set to "on" or "off".

<Input autocomplete="on" v-model="value"/>
<Input autocomplete="off" v-model="value"/>

Mask

The maskInput prop allows you to apply input masks for special formats such as "phone", "number", or "price". You can also define custom masks as strings.

<Input maskInput="number" v-model="value"/>
<Input maskInput="price" v-model="value"/>
<Input maskInput="phone" v-model="value"/>

Length Limits

The lengthInteger and lengthDecimal props set the maximum length for the integer and decimal parts of the input value respectively. These props are useful for inputs that require numeric values with specific formatting.

<Input maskInput="number" :lengthInteger="7" :lengthDecimal="2" v-model="value"/>

Custom CSS Class

The classInput prop allows you to apply custom CSS classes to the input element, enabling you to style it according to your design requirements.

<Input label="text" classInput="text-theme-700 dark:text-theme-300">
  <template #before>
    <Icons type="bi:body-text"/>
  </template>
</Input>