@phila/phila-ui-phone v0.0.8

Code Samples

Label

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"
/>

Description

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>

With icon

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

With loading

Use is-loading to indicate that the input is fetching content.

<phone :is-loading="true" />

The loading indicator temporarily replaces the input icon.

Displaying errors

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.

Live Examples

Basic phone input