Select 

<!-- Default -->
<select id=name=class="select is-default">
    <option value="1" selected>Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<!-- Hover -->
<select id=name=class="select is-hover">
    <option value="hover" selected>Hover</option>
</select>

<!-- Focus -->
<select id=name=class="select is-focus">
    <option value="focus" selected>Focus</option>
</select>

<!-- Error -->
<select id=name=class="select is-error">
    <option value="error" selected>Error</option>
</select>

<!-- Success -->
<select id=name=class="select is-success">
    <option value="success" selected>Success</option>
</select>

<!-- Disabled -->
<select id=name=class="select is-disabled">
    <option value="disabled" selected disabled>Disabled</option>
</select>

<select id={{id}} name={{name}} class="select is-{{modifier}}">
    {{#each options}}
        <option value="{{value}}" {{#if selected}}selected{{/if}}{{#if disabled}} disabled{{/if}}>{{optionName}}</option>
    {{/each}}
</select>
 
/* Default */
{
  "value": "",
  "options": [
    {
      "optionName": "Option 1",
      "selected": true,
      "value": "1"
    },
    {
      "optionName": "Option 2",
      "value": "2"
    },
    {
      "optionName": "Option 3",
      "value": "3"
    }
  ],
  "modifier": "default"
}

/* Hover */
{
  "value": "",
  "options": [
    {
      "optionName": "Hover",
      "selected": true,
      "value": "hover"
    }
  ],
  "modifier": "hover"
}

/* Focus */
{
  "value": "",
  "options": [
    {
      "optionName": "Focus",
      "selected": true,
      "value": "focus"
    }
  ],
  "modifier": "focus"
}

/* Error */
{
  "value": "",
  "options": [
    {
      "optionName": "Error",
      "selected": true,
      "value": "error"
    }
  ],
  "modifier": "error"
}

/* Success */
{
  "value": "",
  "options": [
    {
      "optionName": "Success",
      "selected": true,
      "value": "success"
    }
  ],
  "modifier": "success"
}

/* Disabled */
{
  "value": "",
  "options": [
    {
      "optionName": "Disabled",
      "selected": true,
      "disabled": true,
      "value": "disabled"
    }
  ],
  "modifier": "disabled"
}

There are no notes for this item.