@phila/phila-ui-dropdown v0.0.9

Code Samples

Label

When using the innerLabel option (default), the placeholder prop should be used as the Dropdown label.

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

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

<dropdown
  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 Dropdown.

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

<dropdown>
  <template slot="desc">
    Extra information about this field. <a href="#">Learn more</a>.
  </template>
</dropdown>

With icon

The icon prop expects font-awesome icon classes.

<dropdown icon="fa fa-user-circle" />

Use icons sparingly (eg. Indicating that the input has a different function).

Options

Options can be provided as an Array when the Dropdown label and value are the same.

<dropdown
  v-model="myValues"
  label="My Label"
  :options="options"
/>

options: ["Option 1", "Option 2", "Option 3"];

And options can be provided as an Object when the Dropdown label and value are NOT the same.

options: {
  'option-1': 'Option 1',
  'option-2': 'Option 2',
  'option-3': 'Option 3',
}

An Array of Objects can also be used, in which case the text-key and value-key props need to be provided to indicate the text to be displayed and value to be captured.

<dropdown
  v-model="myValues"
  label="My Label"
  text-key="key1"
  value-key="key2"
/>

options: [
  {
    key1: "My text 1",
    key2: "my-value-1",
  },
  {
    key1: "My text 2",
    key2: "my-value-2",
  },
];

With optgroup

Version 2.0.5 and up.

<dropdown :optgroup="true" />

When optgroup is true, wrap the options in an object where the object key is the group name.

options: {
  "Group 1": [
    "Group 1 - Option 1",
    "Group 1 - Option 2",
    "Group 1 - Option 3",
  ],
  "Group 2": [
    "Group 2 - Option 1",
    "Group 2 - Option 2",
    "Group 2 - Option 3",
  ],
},

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.

<dropdown errors="This field is required" />

This component supports VeeValidate errors. Learn how to validate with the VeeValidade plugin.

Live Examples

Dropdown with Array of options

Dropdown with options Object

Dropdown with Array of Object options

Dropdown with optgroup enabled