Tailwind CSS Multiselect - Taco Vue

Easily create Multiselect with different colors and sizes using our components based on Tailwind CSS and Vue.

Multiselect fields are an essential user interface design element, providing users with the means to enter non-standardized responses.

See below our Multiselect component example that you can use in your Tailwind CSS and Vue project. The example also comes with different options, so you can try and see what's to change.


Select...
<Multiselect 
    :options="options"
    :selected="[]"
    color="blue"
    size="md"
    placeholder="Select..."
    multiple=false
/>

Multiselect Sizes

The Multiselect component comes with 2 different sizes that you can change it using the size prop.

Small Multiselect
Medium Multiselect
<Multiselect 
    :selected="[]"
    color="blue"
    size="sm"
    placeholder="Small Multiselect"
/>
<Multiselect 
    :selected="[]"
    color="blue"
    size="md"
    placeholder="Medium Multiselect"
/>

Multiselect Colors

The Multiselect component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

option 1 option 4
option 1 option 4
option 1 option 4
option 1 option 4 
<Multiselect 
    :options="options" 
    :selected="preselectedItems" 
    :multiple="true"
    placeholder="Multiselect Blue"
    color="blue"
/>
<Multiselect 
    :options="options" 
    :selected="preselectedItems" 
    :multiple="true"
    placeholder="Multiselect Purple"
    color="purple"
/>
<Multiselect 
    :options="options" 
    :selected="preselectedItems" 
    :multiple="true"
    placeholder="Multiselect Indigo"
    color="indigo"
/>
<Multiselect 
    :options="options" 
    :selected="preselectedItems" 
    :multiple="true"
    placeholder="Multiselect Teal"
    color="teal"
/>

Multiselect Animation

The Multiselect component comes with an animation that you open/close using the animate

Select Options
<Multiselect 
    :options="options" 
    :selected="[]"
    color="blue"
    size="md"
    placeholder="Select Options"
    :animation="true"
/>

Custom Multiselect

Select item...
<Multiselect 
    :options="options"
    :selected="[]"
    size="md"
    color="blue"
    placeholder="Select item..."
    :multiple="false"
    :animation="false"
/>