JSFiddle - React, Tailwind, and code Playground

by Kevin Kirchner

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">
  <div class="example">
    <h3 id="example-1">#1 - Single select</h3>
    <div class="output">Data: {{ example1.value }}</div>
    <Multiselect
      v-model="example1.value"
      v-bind="example1"
    ></Multiselect>
<pre v-pre>
  &lt;Multiselect
    v-model="value"
    :options="['Batman', 'Robin', 'Joker']"
  />
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-2">#2 - Multiselect with object options</h3>
    <div class="output">Data: {{ example2.value }}</div>
    <Multiselect
      v-model="example2.value"
      v-bind="example2"
    ></Multiselect>
<pre v-pre>
  &lt;Multiselect
    v-model="value"
    mode="multiple"
    :options="{
      batman: 'Batman',
      robin: 'Robin',
      joker: 'Joker'
    }"
  />
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-3">#3 - Multiselect with disabled options</h3>
    <div class="output">Data: {{ example3.value }}</div>
    <Multiselect
      v-model="example3.value"
      v-bind="example3"
    ></Multiselect>
<pre v-pre>
  &lt;Multiselect
    v-model="value"
    mode="multiple"
    :options="[
      { value: 'batman', label: 'Batman' },
      { value: 'robin', label: 'Robin', disabled: true },
      { value: 'joker', label: 'Joker' },
    ]"
  />
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-4">#4 - Tags with create, search and array of objects options</h3>
    <div class="output">Data: {{ example4.value }}</div>
    <Multiselect
      v-model="example4.value"
      v-bind="example4"
    ></Multiselect>
<pre v-pre>
  &lt;Multiselect
    v-model="value"
    mode="tags"
    :searchable="true"
    :createTag="true"
    :options="[
      { value: 'batman', label: 'Batman' },
      { value: 'robin', label: 'Robin' },
      { value: 'joker',...

CSS

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

h3 {
  margin-top: 0;
}

.example {
  background: #ffffff;
  margin: 20px;
  border-color: #e7e7e7;
  padding: 40px;
}

.example pre {
  background: #f9f9f9;
  padding: 18px 6px;
  overflow-x: scroll;
}

.output {
  font-family: Courier, Courier New, Lucida Console, Monaco, Consolas;
  background: #000000;
  color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

.multiselect-tag.is-user {
  padding: 5px 8px;
  border-radius: 22px;
  background: #35495e;
  margin: 3px 3px 8px;
}

.multiselect-tag.is-user img {
  width: 18px;
  border-radius: 50%;
  height: 18px;
  margin-right: 8px;
  border: 2px solid #ffffffbf;
}

.multiselect-tag.is-user i:before {
  color: #ffffff;
  border-radius: 50%;;
}

.user-image {
  margin: 0 6px 0 0;
  border-radius: 50%;
  height: 22px;
}

.character-option-icon {
  margin: 0 6px 0 0;
  height: 22px;
}

.character-label-icon {
  margin: 0 6px 0 0;
  height: 26px;
}

JavaScript

const app = Vue.createApp({
  data: () => ({
    example1: {
      value: 0,
      options: ['Batman', 'Robin', 'Joker']
    },
    example2: {
    	mode: 'multiple',
      value: ['robin'],
      
      options: {
        batman: 'Batman',
        robin: 'Robin',
        joker: 'Joker'
      }
    },
    example3: {
    	mode: 'multiple',
      value: [],
      options: [
        { value: 'batman', label: 'Batman' },
        { value: 'robin', label: 'Robin', disabled: true },
        { value: 'joker', label: 'Joker' },
      ]
    },
    example4: {
    	mode: 'tags',
      value: ['batman'],
      options: [
        { value: 'batman', label: 'Batman' },
        { value: 'robin', label: 'Robin' },
        { value: 'joker', label: 'Joker' },
      ],
      searchable: true,
      createTag: true
    },
    example5: {
      value: null,
      placeholder: 'Choose a programming language',
      filterResults: false,
      minChars: 1,
      resolveOnLoad: false,
      delay: 0,
      searchable: true,
      options: async (query) => {
        return await fetchLanguages(query)
      }
    },
    example6: {
    	mode: 'tags',
      value: [],
      placeholder: 'Choose your stack',
      filterResults: false,
      minChars: 1,
      resolveOnLoad: false,
      delay: 0,
      searchable: true,
      options: async (query) => {
        return await fetchLanguages(query)
      }
    },
    example7: {
      value: null,
      placeholder: 'Select your character',
      label: 'name',
			options: [
        { value: 'captainamerica', name: 'Captain America', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/03_-_Captain_America_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
        { value: 'spiderman', name: 'Spiderman', icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/12_-_Spiderman_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' },
        { value: 'ironman', name: 'Iron Man', icon:...