OrInputTags

Creates an input that displays results in a dropdown as a user types.

Basic

html

<or-input-tags :options="users" v-model="selectedUser" placeholder="Select user"/>

<or-input-tags :options="users" v-model="selectedUser" placeholder="Select user"/>

Formatting

The example above showed the dropdown options as is without any kind of formatting. We can change this by using scoped slots

html

<or-input-tags :options="users" v-model="selectedUser" placeholder="Select user">
    <template #value="{selected}">
        {{ selected.firstName }} {{ selected.lastName }}
    </template>
    <template #option="{option}">
        {{ option.firstName }} {{ option.lastName }}
    </template>
</or-input-tags>

<or-input-tags :options="users" v-model="selectedUser" placeholder="Select user">
    <template #value="{selected}">
        {{ selected.firstName }} {{ selected.lastName }}
    </template>
    <template #option="{option}">
        {{ option.firstName }} {{ option.lastName }}
    </template>
</or-input-tags>

Props

Prop	Required	Default	Type	Description
options	true	[]	Array	The items to be displayed on the dropdown

OrInputTags ​

Basic ​

Formatting ​

Props ​

OrInputTags

Basic

Formatting

Props