ESL Select Beta

ESLSelect is a component on top of native select that brings more customization features. Uses "select with dropdown" view. Supports both single and multiple selection.

Attributes / Properties

• placeholder - placeholder text for element

• has-value-class - class(es) to mark not empty state

• has-focus-class - class(es) for focused state. Select ia also focused if the dropdown list is opened

• dropdown-class - class(es) for select dropdown

• select-all-label - select all options text

• more-label-format - text to add when there is not enough space to show all selected options inline. Supports {rest}, {length} and {limit} placeholders

• open - dropdown open marker

• disabled - disabled state marker

• pin-selected - marker for selecting items to be pinned to the top of the dropdown

Example

<esl-select class="form-group"
            pin-selected
            placeholder="Color"
            select-all-label="All Colors">
  <label for="color_field" class="form-label">Color</label>
  <select esl-select-target
          multiple
          id="color_field"
          name="color_field"
          class="form-control">
    <option value="#f00">Red</option>
    <option value="#0f0">Green</option>
    <option value="#00f">Blue</option>
    <option value="#ff0">Yellow</option>
    <option value="#0ff">Light Blue</option>
    <option value="#f0f">Purple</option>
  </select>
</esl-select>