VInput

Input component that automatically includes labels, validation, and aria descriptions for any errors.

Styled Example

<template>
  <form @submit.prevent class="styled">
    <VInput v-model="name" label="Your Name:" />
  </form>
</template>

<script>
export default {
  data: () => ({
    name: "",
  }),
}
</script>
.vts-input__text {
  font-size: 14px;
}

.vts-input__input {
  display: block;
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

Input Types

Supports all HTML input types except the file type. Additionally accepts textarea and select.

<template>
  <VInput label="text:" />
</template>
<template>
  <VInput label="email:" type="email" />
</template>
<template>
  <VInput label="textarea:" type="textarea" />
</template>
<template>
  <VInput label="checkbox" type="checkbox" />
</template>
<template>
  <VInput
    type="radio"
    label="radio"
    :options="['option 1', 'option 2', 'option 3', 'option 4']"
  />
</template>
<template>
  <VInput
    label="select"
    type="select"
    :options="['option 1', 'option 2', 'option 3', 'option 4']"
  />
</template>

Description

If you want to add a description to your input, the best practice is to include an aria-describedby attribute in combination with an ID on the description element. Fortunately, with this component you can simply use the description slot.

<template>
  <VInput label="Features:">
    <template v-slot:description>
      Are there any other features you would like to see?
    </template>
  </VInput>
</template>

Validation

This component supports HTML5 input validation. The input's invalid status is provided to the description slot.

Note that client-side validation is never a substitute for server-side validation.

<template>
  <VInput
    v-model="value"
    label="test"
    required
    min="1"
    max="2"
    minlength="2"
    maxlength="20"
    pattern="[0-9]{4}"
  >
    <template v-slot:description="state">
      <ul v-if="state.dirty && state.anyInvalid">
        <template v-for="(isInvalid, key) in state.invalid">
          <li v-if="key === 'required' && isInvalid" :key="key">
            This field is required
          </li>
          <li v-if="key === 'minLength' && isInvalid" :key="key">
            Must be at least 2 characters
          </li>
          <li v-if="key === 'pattern' && isInvalid" :key="key">
            Must be a 4 digit number
          </li>
        </template>
      </ul>
      <br />
      <p>Validation state:</p>
      <pre>{{ state }}</pre>
    </template>
  </VInput>
</template>

<script>
export default {
  data: () => ({
    value: "",
  }),
}
</script>
Last Updated: 9/7/2019, 6:20:02 PM