# Input

Input component that simplifies accessibility and validation.

Source

Features:

# Installation

Globally:

// main.js
import Vue from "vue"
import { VInput } from "vuetensils/src/components"

Vue.component("VInput", VInput)

Locally:

<script>
// SomeComponent.vue
import { VInput } from "vuetensils/src/components"

export default {
  components: {
    VInput,
  },
  // ...
}
</script>

# Styled Example

# Input Types

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

# Hidden Label

Sometimes you may want to hide your label and only show the input. Excluding the label causes an accessibility issue, but you can visually hide the label text with CSS. Note that you will need to add the styles to your project.

# 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.

# 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.

# Custom Classes

This component can accept a classes prop to cusomize the output HTML classes:

:classes="{ root: 'root-class', fieldset: 'fieldset-class', label: 'label-class', text: 'text-class', input: 'input-class', description: 'description-class' }"
Last Updated: 4/16/2020, 8:22:53 PM