Input

A simple vue input component.

GitHub

Demo

Default

Label

Disabled

Label

Read-only

Label

With Help Text

Label Help Text

Label Hidden

Accessible label (visually hidden)

Compact

Label

Validation States

Success

Looks good!

Warning

Are you sure about this?

Error

This field is required.

Required

Email address *

Media Input — Start & End

Search

Website

https://

Price

$USD

Input Types

Text

Email

Password

Number

Phone

Install

npm i @vuesimple/vs-input

Usage

<template>
  <vs-input v-model="name" label="Name" placeholder="Enter your name"></vs-input>
</template>

<script>
  import VsInput from '@vuesimple/vs-input';

  export default {
    components: {
      VsInput,
    },
    data() {
      return {
        name: '',
      };
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-input@3.1.0/dist/index.min.js"></script>

// Main/Entry file
app.use(VsInput.plugin);

<template>
  <vs-input v-model="name" label="Name" placeholder="Enter your name"></vs-input>
</template>

Props

Name	Type	Default	Description
modelValue	Any	''	The input value (supports v-model)
type	String	text	HTML input type. (text, email, password, number, search, url, tel)
label	String	-	Label displayed above the input
hideLabel	Boolean	false	Visually hides the label while keeping it accessible to screen readers
hint	String	-	Helper text shown below the label
placeholder	String	''	Placeholder text inside the input
disabled	Boolean	false	Disables the input
readOnly	Boolean	false	Makes the input read-only
required	Boolean	false	Marks the field as required (shows * next to label)
isCompact	Boolean	false	Compact styling with reduced padding
isBare	Boolean	false	Removes border and background
maxlength	Number	-	Maximum number of characters allowed
validation	String	-	Validation state. (success, warning, error)
message	String	-	Message text shown below the input (paired with validation)

Events

Name	Description
update:modelValue	Emitted on every keystroke (v-model)
change	Emitted when the input value is committed
focus	Emitted when the input gains focus
blur	Emitted when the input loses focus

Slots

Name	Description
start	Content placed before the input (e.g. icon, prefix text)
end	Content placed after the input (e.g. icon, suffix text)

Examples

Basic Input

<vs-input v-model="name" label="Name" placeholder="Enter your name"></vs-input>

With Hint Text

<vs-input v-model="email" label="Email" hint="We'll never share your email." placeholder="you@example.com"></vs-input>

Required Field

<vs-input v-model="email" label="Email address" type="email" placeholder="you@example.com" required></vs-input>

Disabled

<vs-input v-model="name" label="Name" disabled></vs-input>

Read-only

<vs-input v-model="name" label="Name" read-only></vs-input>

Compact

<vs-input v-model="name" label="Name" is-compact></vs-input>

Bare (no border)

<vs-input v-model="name" label="Name" is-bare></vs-input>

Hidden Label

<vs-input v-model="query" label="Search" hide-label placeholder="Search…"> </vs-input>

Validation States

<vs-input v-model="email" label="Email" validation="success" message="Looks good!"></vs-input>
<vs-input v-model="email" label="Email" validation="warning" message="Are you sure about this?"></vs-input>
<vs-input v-model="email" label="Email" validation="error" message="This field is required."></vs-input>

Media Input — Start Icon

<vs-input v-model="query" label="Search" placeholder="Search…">
  <template #start>
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
      <path
        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z"
      />
    </svg>
  </template>
</vs-input>

Media Input — Start & End Addons

<vs-input v-model="price" label="Price" placeholder="0.00" type="number">
  <template #start>$</template>
  <template #end>USD</template>
</vs-input>

URL Prefix

<vs-input v-model="url" label="Website" placeholder="example.com" type="url">
  <template #start>
    <span>https://</span>
  </template>
</vs-input>

Events Handling

<template>
  <vs-input
    v-model="email"
    label="Email"
    type="email"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  ></vs-input>
</template>

<script>
  export default {
    data() {
      return {
        email: '',
      };
    },

    methods: {
      handleChange(value) {
        console.log('Value committed:', value);
      },

      handleFocus(event) {
        console.log('Input focused');
      },

      handleBlur(event) {
        console.log('Input blurred');
      },
    },
  };
</script>