Svelte Select

Pro Component

The Svelte Select is a form control that displays a collapsable list of multiple values. Svelte Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Keep reading our Svelte Select examples and learn how to use this plugin.

Initialization

<script>
import MultiSelect from "../../../components/Inputs/MultiSelect.svelte";
</script>

Example

Simple Select

<script>
let selectOptions = [
  {
    label: "Alerts",
    value: "Alerts"
  },
  {
    label: "Badges",
    value: "Badges"
  },
  {
    label: "Buttons",
    value: "Buttons"
  },
  {
    label: "Cards",
    value: "Cards"
  },
  {
    label: "Forms",
    value: "Forms"
  },
  {
    label: "Modals",
    value: "Modals"
  }
];
</script>

<div
  class="el-input el-input--suffix {suffix === true ? 'is-focus' : ''}">
  <!---->
  <label class="form-control-label">Simple select</label>
  <input
    type="text"
    id="search"
    on:click={() => (suffix = true)}
    readonly="readonly"
    autocomplete="off"
    placeholder={itemSelected}
    class="el-input__inner text-dark" />
  <!---->
  <span
    class="el-input__suffix"
    style="max-height: 43px; top: 40%;">
    <span class="el-input__suffix-inner">
      <i
        class="el-select__caret el-input__icon
        el-icon-arrow-up {suffix === true ? 'is-reverse' : ''}" />
      <!---->
      <!---->
    </span>
    <!---->
  </span>
  <!---->
</div>
<div
  class="el-select-dropdown el-popper"
  style="display: {suffix === false ? 'none' : ''};
  min-width: 96%; z-index: 100000;">
  <div class="el-scrollbar" style="">
    <div
      class="el-select-dropdown__wrap el-scrollbar__wrap"
      style="margin-bottom: -17px; margin-right: -17px;">
      <ul
        class="el-scrollbar__view el-select-dropdown__list">
        <!---->
        {#each selectOptions as option}
          <li
            class="el-select-dropdown__item select-primary {itemSelected === option.label ? 'selected' : ''}"
            on:click={() => ((suffix = false), (itemSelected = option.label))}>
            <span>{option.label}</span>
          </li>
        {/each}
      </ul>
    </div>
    <div class="el-scrollbar__bar is-horizontal">
      <div
        class="el-scrollbar__thumb"
        style="transform: translateX(0%);" />
    </div>
    <div class="el-scrollbar__bar is-vertical">
      <div
        class="el-scrollbar__thumb"
        style="transform: translateY(0%);" />
    </div>
  </div>
  <!---->
</div>

Multiple Select

<script>
let selectOptions = [
  {
    label: "Alerts",
    value: "Alerts"
  },
  {
    label: "Badges",
    value: "Badges"
  },
  {
    label: "Buttons",
    value: "Buttons"
  },
  {
    label: "Cards",
    value: "Cards"
  },
  {
    label: "Forms",
    value: "Forms"
  },
  {
    label: "Modals",
    value: "Modals"
  }
];
</script>

<BaseInput label="Multiple Select">
  <MultiSelect id="options" value={['Alerts', 'Buttons']}>
    {#each selectOptions as option}
      <option
        value={option.value}
        class="el-tag el-tag--info el-tag--small v-enter-to">
        {option.label}
      </option>
    {/each}
  </MultiSelect>
</BaseInput>