<select name="multiselect_name" id="multiselect_id" multiple="multiple">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
  </select>
<select name="{{ multiselect_name }}"
        id="{{ multiselect_id }}"
        multiple="multiple"
        {% if modifier %}
          class="{{ modifier }}"
        {% endif %}
>
  {% for option in options %}
    <option>{{ option.label }}</option>
  {% endfor %}
</select>
{
  "label": "Multiselect",
  "multiselect_name": "multiselect_name",
  "multiselect_id": "multiselect_id",
  "options": [
    {
      "label": "Option 1"
    },
    {
      "label": "Option 2"
    },
    {
      "label": "Option 3"
    },
    {
      "label": "Option 4"
    }
  ]
}
  • Content:
    select[multiple] {
      @extend %field-colors;
    
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZD0iTTUwMCwxMEwyMjcuOCwzOTEuMWg1NDQuNEw1MDAsMTB6IE01MDAsOTkwbDI3Mi4yLTM4MS4xSDIyNy44TDUwMCw5OTB6Ii8+PC9nPg0KPC9zdmc+');
      background-repeat: no-repeat;
      background-position: center right 5px;
      background-size: 1rem 1rem;
    }
    
  • URL: /components/raw/input-multiselect/_input-multiselect.scss
  • Filesystem Path: components/21-atoms/inputs/input-multiselect/_input-multiselect.scss
  • Size: 973 Bytes

There are no notes for this item.