Tailwind CSS Multiselect - Taco Svelte

Use our Taco Multiselect component to collect user provided information from a list of options.

Select...
<Multiselect 
    options="options"
    selected="[]"
    color="green"
    size="md"
    placeholder="Select..."
    multiple="true"
/>

Multiselect Sizes

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

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

Select Colors

The Select component comes with 19 different colors that you can change 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"
/>

Select Animation

You can modify the open/close state animation for Select component using the animate prop.

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

Custom Select

Select item...
<Multiselect 
options="options"
selected=""
size="md"
color="green"
placeholder="Select item..."
multiple="false"
animation="false"
/>