Enzyme UI

# Input

Input is fundamental form element used to capture user input.

# Simple usage

Content added inside label slot will be marked as label for input. You can control and retrieve value of input element by using v-model

A label for input which explains input

The value of input: 

<Input placeholder="Some additional placeholder text" v-model="inputModel1">
<template v-slot:label>
    <span>A label for input which explains input </span>
</template>
</Input>
<script>
    export default{
        data(){
            return {
                inputModel1:'',                    
            }
        },
    } 
</script>

# Slots

Slots label, info, error can be used to provide contextual text messages with input element.

In case you want to provide some additional small information text for user, you can utilize info slot.

A label for input which explains input
Small explanatory info text like "This field is required"
<Input placeholder="Some additional placeholder text">
<template v-slot:label>
    <span>A label for input which explains input </span>
</template>
<template v-slot:info>
    <span>Small explanatory info text like "This field is required"</span>
</template>
</Input>

To show success or error status you can use error slot and invalid prop

A label for invalid input which explains input
Error text
A label for valid input which explains input 
<Input class="mt-4" placeholder="Some additional placeholder text" :invalid="true">
<template v-slot:label>
    <span>A label for <b>invalid</b> input which explains input </span>
</template>
<template v-slot:error>
    <span>Error text</span>
</template>
</Input>

<Input class="mt-4" placeholder="Some additional placeholder text" :invalid="false">
<template v-slot:label>
    <span>A label for <b>valid</b> input which explains input </span>
</template>
</Input>

# Input prepend/append

You can use prepend and append slots to add prepend and append content to input. This is useful whenever you need to add icons or some additional text. Content provided in these slots will be wrapped with Bootstrap's input-group-prepend or input-group-append classes respectively.

A label for phone number input
+470
A label for phone number input
<Input placeholder="Some additional placeholder text">
<template v-slot:label>
    <span>A label for phone number input</span>
</template>
<template v-slot:prepend>
    <div class="input-group-text">+470</div>
</template>
</Input>

<Input placeholder="Some additional placeholder text">
<template v-slot:label>
    <span>A label for phone number input</span>
</template>
<template v-slot:append>
    <div class="input-group-text text-primary">
        <svg xmlns="http://www.w3.org/2000/svg"  width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z"/>
          <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
          <path d="M15 7a2 2 0 0 1 2 2" />
          <path d="M15 3a6 6 0 0 1 6 6" />
        </svg>
    </div>
</template>
</Input>

# Textarea

You can also use Input as textarea. Simply provide tag prop as textarea.

A label for textarea 
<Input tag="textarea" placeholder="Some additional placeholder text">
<template v-slot:label>
    <span>A label for textarea </span>
</template>
</Input>

# Props

name default description required type
type text Input type attribute false String
value Input value attribute false 0
name Input name attribute false String
placeholder Input placeholder value false String
invalid null Whether input is invalid and error message must be shown false Boolean
errorText Error message false String
infoText Info message false String
label Label text false String
size Input size: lg - for large, sm - for small false String
required true Whether filling input is required or no false Boolean
tag input Tag for input element. Can be either input or textarea false String

← Modal →