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