Input

The VInput component allows users to input data with various styling options. This document provides detailed usage instructions and prop descriptions to help developers integrate the component effectively.

Features

Provides three variants: filled (default), outlined, and underline for different input styles.
Provides four sizes: sm, md (default), lg and auto for different input sizes.
Supports v-model for easy two-way data binding.
Allows adding icons as prefixes or suffixes to the input field for enhanced user experience.

Usage

Here's basic example of using the VInput component.

Username

View Code

<template>
  <VInput label="Username" placeholder="Enter your username" />
</template>

Variants

The VInput component provides three style variants: filled, outlined, and underline.

Username

View Code

<template>
  <VInput
    outer-class="mb-4"
    label="Username"
    placeholder="Enter your username"
    variant="filled"
  />
  <VInput
    outer-class="mb-4"
    label="Username"
    placeholder="Enter your username"
    variant="outlined"
  />
  <VInput
    outer-class="mb-4"
    label="Username"
    placeholder="Enter your username"
    variant="underline"
  />
</template>

Sizes

The VInput component accept four size variants: sm, md, lg and auto.

Username

View Code

<template>
  <VInput
    wrapper-class="mb-4"
    label="Username"
    placeholder="Enter your username"
    size="sm"
  />
  <VInput
    wrapper-class="mb-4"
    label="Username"
    placeholder="Enter your username"
    size="md"
  />
  <VInput
    wrapper-class="mb-4"
    label="Username"
    placeholder="Enter your username"
    size="lg"
  />
  <VInput
    wrapper-class="mb-4"
    label="Username"
    placeholder="Enter your username"
    size="auto"
  />
</template>

Hint

You can add a hint to provide additional information about the input via hint prop.

Username

This is a hint

View Code

<template>
  <VInput
    label="Username"
    placeholder="Enter your username"
    hint="This is a hint"
  />
</template>

Error

You can display an error message when the input value is invalid or there's an error with error and error-message props.

Username

This is an error

Username

This is an error

Username

This is an error

View Code

<template>
  <VInput
    label="Username"
    placeholder="Enter your username"
    error="This is an error"
  />
</template>

Icons

You can add icons to the input to enhance the user experience with prepend-icon or append-icon prop.

Username

View Code

<template>
  <VInput
    label="Username" placeholder="Enter your username"
    prepend-icon="ph:person-fill"
    append-icon="ph:check-circle-fill"
    outer-class="mb-4"
  />
  <VInput
    label="Email" placeholder="Enter your email"
    prepend-icon="ri:at-fill"
  />
</template>

v-model

The VInput component supports the v-model directive for two-way data binding.

Username

Value:

View Code

<template>
  <VInput
    v-model="value"
    label="Username"
    placeholder="Enter your username"
  />
  <pre class="mt-4">Value: {{ value }}</pre>
</template>

Input Types

The VInput component supports various input types.

text

password

number

url

tel

date

time

datetime-local

month

week

color

file

range

Values: {
  "text": "",
  "password": "",
  "email": "",
  "number": 0,
  "url": "",
  "tel": "",
  "search": "",
  "date": "",
  "time": "",
  "datetime-local": "",
  "month": "",
  "week": "",
  "color": "",
  "file": "",
  "range": 0
}

View Code

<script setup lang="ts">
const types = [
  'text',
  'password',
  'email',
  'number',
  'url',
  'tel',
  'search',
  'date',
  'time',
  'datetime-local',
  'month',
  'week',
  'color',
  'file',
  'range',
]

const form = reactive({
  'text': '',
  'password': '',
  'email': '',
  'number': 0,
  'url': '',
  'tel': '',
  'search': '',
  'date': '',
  'time': '',
  'datetime-local': '',
  'month': '',
  'week': '',
  'color': '',
  'file': '',
  'range': 0,
})
</script>

<template>
  <VInput
    v-for="type in types"
    :key="type"
    v-model="form[type]"
    :type="type"
    :label="type"
    placeholder="This is placeholder"
    outer-class="mb-4"
  />
  <pre class="mt-4">Values: {{ form }}</pre>
</template>

Props

The VInput component accepts the following props:

Prop	Type	Default	Description
variant	'filled' \| 'outlined' \| 'underline'	'filled'	Specifies the style variant for the input.
type	string	'text'	Specifies the type of input (e.g., 'text', 'password', 'number', etc.).
label	string	-	The label for the input.
placeholder	string	-	The placeholder text to display inside the input when it is empty.
prependIcon	string	-	The name of the icon to display before the input element.
prependIconClass	string	-	CSS class to customize the styling of the prepend icon.
prependIconSize	string	-	The size of the prepend icon.
appendIcon	string	-	The name of the icon to display after the input element.
appendIconClass	string	-	CSS class to customize the styling of the append icon.
appendIconSize	string	-	The size of the append icon.
iconSize	string	'20'	The default size for the icons (both prepend and append icons).
size	'sm' \| 'md' \| 'lg'	'auto'	-
outerClass	string	-	CSS class to customize the styling of the outer container of the input.

Events

The VInput component emits the following events:

Event	Parameters	Description
click:prepend	-	Triggered when the user clicks on the prepend area.
click:prependIcon	-	Triggered when the user clicks on the prepend icon.
click:append	-	Triggered when the user clicks on the append area.
click:appendIcon	-	Triggered when the user clicks on the append icon.