This project is a component called multiselect created using Alpine.js

• Alpine.js
• TailwindCSS

# Install packages
npm i

# Start Vitejs
npm run dev

This component is inspired by the new Alpine.js components, precisely the dropdown!

In fact, in server-side framework like AdonisJS, Ruby on Rails or Laravel, having Alpine.js is such useful to create interactive components ! But why always creating components from scratch? This is why this multiselect exist, to help you!

This multiselect have keyboards navigation built-in!

The multiselect takes 2 parameters:

• data, an array of object with id and name
• selectedData, an array of id

Exemple:

multiselect([
    {
        id: 1,
        name: 'Option 1',
    },
    {
        id: 2,
        name: 'Option 2',
    },
    {
        id: 3,
        name: 'Option 3',
    },
    {
        id: 4,
        name: 'Option 4',
    },
    {
        id: 5,
        name: 'Option 5',
    },
], [1, 3])

But, because you will copy-paste this component, feel free to update data to your to your needs!

Using a template engine is easy now.

With Edge:

multiselect({{ stringify(data) }}, {{ stringify(selectedData) }})

With PHP:

multiselect(<?= json_encode(data)  ?>, <?= json_encode(selectedData) ?>)

And your multiselect will works on client-side!

Yes! You can use it in a form because a select with multiple attribut is updated in realtime using the selected data.

 <select multiple="multiple" name="alpine[]" hidden>
    <template x-for="id in selected" :key="id">
        <option selected :value="id"></option>
    </template>
</select>

You can test this component at this url

Contributions are always welcome!

Feel free to provide feedbacks !

• @barbapapazes