Cartzilla component

Select box

Single / multiple select with search and sorting, tags components.

The Select box component relies on the Choices.js plugin. To use this component, ensure to include the required reference to the plugin's .css and .js files.

CSS file is linked in the <head> section and above theme.min.css reference in your document:

<link rel="stylesheet" href="assets/vendor/choices.js/public/assets/styles/choices.min.css">

JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:

<script src="assets/vendor/choices.js/public/assets/scripts/choices.min.js"></script>

You can apply virtually any Choices.js option by specifying it within the data-select="{}" attribute.

Usefull links:

Basic select

<!-- Basic select example -->
<select class="form-select" data-select aria-label="Basic select example">
  <option value="">Choose name...</option>
  <option value="Emily Johnson">Emily Johnson</option>
  <option value="Michael Davis">Michael Davis</option>
  <option value="Jessica Smith">Jessica Smith</option>
  <option value="Christopher Taylor">Christopher Taylor</option>
  <option value="Olivia Anderson">Olivia Anderson</option>
  <option value="Ethan Williams">Ethan Williams</option>
</select>

<!-- Disabled select -->
<select class="form-select" data-select aria-label="Disabled select example" disabled>
  <option value="">Disabled select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

Search and option groups

<!-- Select with enabled search and option groups -->
<select class="form-select" data-select='{
  "searchEnabled": true
}' aria-label="Select with search example">
  <option value="">Select country...</option>
  <optgroup label="Africa">
    <option value="Nigeria">Nigeria</option>
    <option value="South Africa">South Africa</option>
    <option value="Kenya">Kenya</option>
    <option value="Egypt">Egypt</option>
    <option value="Ethiopia">Ethiopia</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="China">China</option>
    <option value="India">India</option>
    <option value="Japan">Japan</option>
    <option value="South Korea">South Korea</option>
    <option value="Saudi Arabia">Saudi Arabia</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="Germany">Germany</option>
    <option value="France">France</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Italy">Italy</option>
    <option value="Spain">Spain</option>
  </optgroup>
  <optgroup label="North America">
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>
    <option value="Mexico">Mexico</option>
    <option value="Jamaica">Jamaica</option>
    <option value="Costa Rica">Costa Rica</option>
  </optgroup>
  <optgroup label="South America">
    <option value="Brazil">Brazil</option>
    <option value="Argentina">Argentina</option>
    <option value="Colombia">Colombia</option>
    <option value="Chile">Chile</option>
    <option value="Peru">Peru</option>
  </optgroup>
  <optgroup label="Oceania">
    <option value="Australia">Australia</option>
    <option value="New Zealand">New Zealand</option>
    <option value="Papua New Guinea">Papua New Guinea</option>
    <option value="Fiji">Fiji</option>
    <option value="Solomon Islands">Solomon Islands</option>
  </optgroup>
</select>

Multiple select

<!-- Multiple select example -->
<select class="form-select" data-select multiple aria-label="Multiple select example">
  <option value="">Select CMS</option>
  <option value="Shopify" selected>Shopify</option>
  <option value="WooCommerce">WooCommerce</option>
  <option value="Magento">Magento</option>
  <option value="OpenCart">OpenCart</option>
  <option value="PrestaShop">PrestaShop</option>
  <option value="VirtueMart">VirtueMart</option>
</select>

<!-- Disabled select -->
<select class="form-select" data-select multiple aria-label="Disabled multiple select" disabled>
  <option value="">Disabled select</option>
  <option value="Shopify" selected>Shopify</option>
  <option value="WooCommerce">WooCommerce</option>
  <option value="Magento">Magento</option>
  <option value="OpenCart">OpenCart</option>
  <option value="PrestaShop">PrestaShop</option>
  <option value="VirtueMart">VirtueMart</option>
</select>

Tags input

<!-- Tags input example -->
<input type="text" class="form-select" data-select='{"placeholderValue": "Enter something"}' value="tag-1,tag-2">

<!-- Disabled tags input -->
<input type="text" class="form-select" data-select='{"placeholderValue": "Disabled input"}' value="tag-1,tag-2" disabled>

Custom option template

<!-- Select with custom option template -->
<select class="form-select" data-select='{
  "placeholderValue": "Select language",
  "choices": [
    {
      "value": "",
      "label": "Select language",
      "placeholder": true
    },
    {
      "value": "English",
      "label": "<div class=\"d-flex align-items-center\"><img src=\"assets/img/flags/en-uk.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"English\"> English</div>",
      "selected": true
    },
    {
      "value": "Français",
      "label": "<div class=\"d-flex align-items-center\"><img src=\"assets/img/flags/fr.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Français\"> Français</div>"
    },
    {
      "value": "Deutsch",
      "label": "<div class=\"d-flex align-items-center\"><img src=\"assets/img/flags/de.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Deutsch\"> Deutsch</div>"
    },
    {
      "value": "Italiano",
      "label": "<div class=\"d-flex align-items-center\"><img src=\"assets/img/flags/it.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Italiano\"> Italiano</div>"
    }
  ]
}' data-select-template="true" aria-label="Select language"></select>

<!-- Select with custom option template where selected label = customProperties.selected -->
<select class="form-select" data-select='{
  "placeholderValue": "Choose rating",
  "choices": [
    {
      "value": "",
      "label": "Choose rating",
      "placeholder": true
    },
    {
      "value": "1",
      "label": "<span class=\"visually-hidden\">1 star</span>",
      "customProperties": {
        "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
        "selected": "1 star"
      }
    },
    {
      "value": "2",
      "label": "<span class=\"visually-hidden\">2 stars</span>",
      "customProperties": {
        "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
        "selected": "2 stars"
      }
    },
    {
      "value": "3",
      "label": "<span class=\"visually-hidden\">3 stars</span>",
      "customProperties": {
        "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
        "selected": "3 stars"
      }
    },
    {
      "value": "4",
      "label": "<span class=\"visually-hidden\">4 stars</span>",
      "customProperties": {
        "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
        "selected": "4 stars"
      }
    },
    {
      "value": "5",
      "label": "<span class=\"visually-hidden\">5 stars</span>",
      "customProperties": {
        "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
        "selected": "5 stars"
      }
    }
  ]
}' data-select-template="true" aria-label="Choose rating"></select>

Sizes and shapes

<!-- Large rounded select -->
<div class="mb-3">
  <select class="form-select form-select-lg" data-select='{
    "classNames": {
      "containerInner": ["form-select", "form-select-lg"]
    }
  }' aria-label="Large rounded select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<!-- Normal rounded select -->
<div class="mb-3">
  <select class="form-select" data-select aria-label="Normal rounded select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<!-- Small rounded select -->
<div class="mb-3">
  <select class="form-select form-select-sm" data-select='{
    "classNames": {
      "containerInner": ["form-select", "form-select-sm"]
    }
  }' aria-label="Small rounded select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<!-- Large pill select -->
<div class="mb-3">
  <select class="form-select form-select-lg rounded-pill" data-select='{
    "classNames": {
      "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
    }
  }' aria-label="Large pill select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<!-- Normal pill select -->
<div class="mb-3">
  <select class="form-select rounded-pill" data-select='{
    "classNames": {
      "containerInner": ["form-select", "rounded-pill"]
    }
  }' aria-label="Normal pill select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<!-- Small pill select -->
<div class="mb-3">
  <select class="form-select form-select-sm rounded-pill" data-select='{
    "classNames": {
      "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
    }
  }' aria-label="Small pill select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<!-- Large square select -->
<div class="mb-3">
  <select class="form-select form-select-lg rounded-0" data-select='{
    "classNames": {
      "containerInner": ["form-select", "form-select-lg", "rounded-0"]
    }
  }' aria-label="Large square select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<!-- Normal square select -->
<div class="mb-3">
  <select class="form-select rounded-0" data-select='{
    "classNames": {
      "containerInner": ["form-select", "rounded-0"]
    }
  }' aria-label="Normal square select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<!-- Small square select -->
<div class="mb-3">
  <select class="form-select form-select-sm rounded-0" data-select='{
    "classNames": {
      "containerInner": ["form-select", "form-select-sm", "rounded-0"]
    }
  }' aria-label="Small square select">
    <option value="">Select option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem