Slim Select Styles

Slim Select is a neat library that makes better single and multiple select inputs. It is a very powerful library, but it doesn't really fit Bootstrap out-of-the-box. To use Slim Select in your project, you will need to install the script yourself, but instead of using their provided styles, you can use styles from Bootstrap Extensions to help make sure they match your styles better.

This CSS is specifically based off of Slim Select v3.2.0. If something doesn't quite look right at first, double check that you are using the same version. If there is a newer version causing a break, submit a PR.

Getting Started

Sass

@import "node_modules/@ngblaylock/bootstrap-extensions/src/scss/_slim-select-bse.scss";

CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ngblaylock/bootstrap-extensions@0.3.0/dist/css/slim-select-bse.min.css"
/>

JS

You will also need to use the Slim Select JS file in some form, but use Bootstrap Extension styles instead of Slim Select's styles. The easiest way is to use the slim select CDN link.

<script src="https://unpkg.com/slim-select@3.2.0/dist/slimselect.js"></script>

Examples

<div class="vstack gap-3">

  <!-- Regular Bootstrap Select -->
  <div>
    <label for="regular-select" class="form-label">Regular Select</label>
    <select id="regular-select" class="form-select">
      <option value="value1">Value 1</option>
      <option value="value2">Value 2</option>
      <option value="value3">Value 3</option>
    </select>
  </div>

  <!-- Single Select Example -->
  <div>
    <label for="single-example" class="form-label"
      >Slim Select Single Example</label
    >
    <select id="single-example">
      <option value="value1">Value 1</option>
      <option value="value2">Value 2</option>
      <option value="value3">Value 3</option>
      <option value="value4" disabled>Value 4</option>
      <option value="value5">Value 5</option>
      <option value="value6">Value 6</option>
    </select>
  </div>

  <!-- Multiple Select Example -->
  <div>
    <label for="multiple-example" class="form-label"
      >Slim Select Multiple Example</label
    >
    <select id="multiple-example" multiple></select>
  </div>
</div>

<script>
  new SlimSelect({
    select: "#single-example",
    settings: {
      showSearch: false,
      allowDeselect: true,
    },
  });
  new SlimSelect({
    select: "#multiple-example",
    settings: {
      allowDeselect: true,
      maxValuesShown: 3,
      searchHighlight: true,
    },
    data: [
      {
        label: "Label 1",
        options: [
          { text: "Option 1", value: "1" },
          { text: "Option 2", value: "2", disabled: true },
          { text: "Option 3", value: "3" },
        ],
      },
      {
        label: "Label 2",
        options: [
          { text: "Option 4", value: "4" },
          { text: "Option 5", value: "5" },
          { text: "Option 6", value: "6" },
        ],
      },
      {
        label: "Label 3",
        options: [
          { text: "Option 7", value: "7" },
          { text: "Option 8", value: "8" },
          { text: "Option 9", value: "9" },
        ],
      },
    ],
  });

</script>

Important Notes:

• z-index is set to 10000 which goes against Bootstrap's Z-index methodology. If you need it lower than others, then do so manually.
• Disabled inputs are typically not focusable via the keyboard. Adding the disabled: true setting will style the Slim Select style to match other disabled inputs, but it will still be focusable with no user interaction available. To match other disabled properties, you may need to manually select the div.ss-main.ss-disabled element and change the tabindex to -1. This cannot be achieved through CSS so this library will not handle that functionality.
• This is not optimal if there is a large amount of data in the select for options. Another option that might be better for large data options could be Virtual Select which would need a similar workflow; install the JS but use a Bootstrap-specific CSS instead. This is not (yet) a part of Bootstrap Extensions.