JSFiddle - React, Tailwind, and code Playground

by Owumaro

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<div id="app">
  <Multiselect
    v-model="value"
    :options="options"
    placeholder="All status"
  ></Multiselect>
  Value: {{ JSON.stringify(value) }}
</div>

CSS

body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

JavaScript

const app = Vue.createApp({
  data: () => ({
  	value: null,
    options: [
    	{
      	value: null,
        label: 'All status'
      }, {
      	value: false,
        label: 'Inactive'
      }, {
      	value: true,
        label: 'Active'
      }
    ],
	})
})

app.component('Multiselect', VueformMultiselect)
app.mount('#app')