Canvas Docs

Select Boxes

Select Boxes

Canvas bundles Select2 to enhance native <select> elements with searchable dropdowns, option groups, multiple selection, tagging, and remote or array driven data. It is a richer alternative to the plain browser select and pairs cleanly with Bootstrap form controls.

Setup

Include the bundled stylesheet in the <head> and the scripts before </body>, then call select2() on your select.

<!-- In <head> -->
<link rel="stylesheet" href="css/components/select-boxes.css">

<!-- Before </body> -->
<script src="js/components/select-boxes.js"></script>
<script src="js/components/selectsplitter.js"></script>
jQuery(".select-1").select2();

Structure

Use a normal <select> with the .form-select class and a targeting class. Add optgroup for grouping and multiple for multi selection. Setting style="width:100%;" lets the box fill its column.

<!-- Grouped single select -->
<label>Select With Drop Down</label>
<select class="select-1 form-select" style="width:100%;">
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
  </optgroup>
</select>

<!-- Multiple selection -->
<label>Select Multiple Values</label>
<select class="select-1 form-select" multiple="multiple" style="width:100%;">
  <option value="CA">California</option>
  <option value="NV">Nevada</option>
</select>

<!-- Tagging (free text entries) -->
<select class="select-tags form-select" multiple style="width:100%;"></select>
// Basic
jQuery(".select-1").select2();

// Populated from an array of data
jQuery(".select-data-array").select2({
  data: [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }]
});

// Allow custom tags
jQuery(".select-tags").select2({ tags: true });

Options

Pass these to select2({ ... }):

  • placeholder: text shown when nothing is selected.
  • data: an array of { id, text } objects to build options in JS.
  • tags: true: let users type and add new options on the fly.
  • multiple: enable multi selection (or add the multiple attribute on the select).
  • allowClear: show a clear button when a placeholder is set.
  • width: control the box width, for example '100%'.

Tips

  • Add .form-select alongside your targeting class so the box matches other Bootstrap fields before Select2 initializes.
  • For grouped options, wrap them in <optgroup label="...">; Select2 renders the group headers automatically.
  • Use multiple="multiple" on the <select> for a token style multi value picker.
Was this page helpful?