When using the innerLabel
option (default), the placeholder
prop should be used as the input label.
<phone
v-model="myValue"
placeholder="My Label"
/>
If a label is also provided, then the label will be displayed once the user clicks on the field.
<phone
v-model="myValue"
placeholder="My Label"
label="My alternative label"
/>
When NOT using the innerLabel
option (default), the placeholder
and label
props will function independently and both should be provided.
<phone
v-model="myValue"
placeholder="My placeholder"
label="My Label"
:inner-label="false"
/>
Use the desc
prop or slot to provide extra information about the input.
<phone desc="Extra information about this field" />
Use the slot when the description contains html that needs to be rendered. For instance, when adding a link to the description.
<phone>
<template slot="desc">
Extra information about this field. <a href="#">Learn more</a>.
</template>
</phone>
The icon prop expects font-awesome icon classes.
<phone icon="fa fa-phone" />
Use icons sparingly (eg. Indicating that the input has a different function).
Use is-loading
to indicate that the input is fetching content.
<phone :is-loading="true" />
The loading indicator temporarily replaces the input icon.
To display an error provide a String with the error, or an Array of errors. Only the first error in the array is displayed.
<phone errors="This field is required" />
This component supports VeeValidate errors. Learn how to validate with the VeeValidade plugin.