# Input

# Usage

// Global installation
import InputInstaller from "vue-elder-input";
//...
Vue.use(InputInstaller);

// Local installation
import { InputComponent } from "vue-elder-input";

//...
components: {
  InputComponent;
}

# Slots

• default
• left
• right
• icon
• prefix
• suffix
• icon
• validation-message

This component accepts a default slot. The slot replaces the input element. This is very convenient if you need a more complex input element. e.g. Google Autocomplete

<input-component>
  <google-autocomplete></google-autocomplete>
</input-component>

# Props

• value String | Number | Date
• label String
• validate Boolean
• prefix String
• suffix String
• icon String | Array
• align String
• mask Object

You can use all standard input attributes like: type, placeholder, autofocus, etc.

# value

• Type: String | Number | Date
• Default: null
• Required: true

# Description

Give the input some value. Usually this is handled with v-model.

# Example

<input-component value="John Doe"></input-component>

# label

• Type: String
• Default: null

# Description

Set input label

# Example

<input-component label="Fancy label"></input-component>

# validate

• Type: Boolean
• Default: false

# Description

Show a checkmark when the input is valid. Works very well with required and pattern.

# Example

<input-component label="Name" required validate></input-component>

# prefix

• Type: String
• Default: null

# Description

Show a prefix before the input.

# Example

<input-component value="450" prefix="NOK"></input-component>

# suffix

• Type: String
• Default: null

# Description

Show a suffix before the input.

# Example

<input-component value="450" suffix="NOK"></input-component>

# icon

• Type: String | Array
• Default: null

# Description

Sets an icon. Icon is based on the VueFontawesome plugin.
Make sure to import your icons before referencing to them.

# Example

<input-component
  label="Sample"
  :icon="['fas', 'check-circle']"
></input-component>

# align

• Type: String
• Default: left
• Allowed values: left | center | right

# Description

Sets the input value alignment.

# Example

<input-component label="Value" align="right"></input-component>

# mask

• Type: Object
• Default: null

# Description

Mask your input to make it easier to read and input data. Masking is based on vue-imask and imaskjs. For more information about the mask object check out this documentation.

# Example

<input-component
  label="Value"
  prefix="NOK"
  type="number"
  :mask="{ mask: Number, thousandsSeparator: ' ', unmask: true }"
></input-component>