🍷 Digital Wine Cellar – Pattern Library

Form item select 

<!-- Default -->
<div class="form-item ">
    <label for="select-1">Select</label>
    <select id="select-1" name="select-1" class="">
        <option value="option-0">Option 1</option>
        <option value="option-1">Option 2</option>
        <option value="option-2" selected>Option 3</option>
        <option value="option-3">Option 4</option>
        <option value="option-4">Option 5</option>
        <option value="option-5">Option 6</option>
    </select>
</div>


<!-- Multiple -->
<div class="form-item ">
    <label for="select-2">Select multiple</label>
    <select id="select-2" name="select-2" multiple class="">
        <option value="option-0">Option 1</option>
        <option value="option-1" selected>Option 2</option>
        <option value="option-2">Option 3</option>
        <option value="option-3">Option 4</option>
        <option value="option-4">Option 5</option>
        <option value="option-5">Option 6</option>
    </select>
</div>


<!-- Optgroup -->
<div class="form-item ">
    <label for="select-3">Select with optgroups</label>
    <select id="select-3" name="select-3" class="">
        <optgroup label="Group 1">
            <option value="option-0">Option 1-1</option>
            <option value="option-1">Option 1-2</option>
            <option value="option-2" selected>Option 1-3</option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="option-0">Option 2-1</option>
            <option value="option-1">Option 2-2</option>
            <option value="option-2">Option 2-3</option>
        </optgroup>
    </select>
</div>


<!-- Optgroup -->
<div class="form-item ">
    <label for="select-4">Select multiple with optgroups</label>
    <select id="select-4" name="select-4" multiple class="">
        <optgroup label="Group 1">
            <option value="option-0" selected>Option 1-1</option>
            <option value="option-1" selected>Option 1-2</option>
            <option value="option-2">Option 1-3</option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="option-0">Option 2-1</option>
            <option value="option-1">Option 2-2</option>
            <option value="option-2">Option 2-3</option>
        </optgroup>
    </select>
</div>


<!-- Default -->
{{#> @form-item}}
  {{> @select}}
{{/ @form-item}}

<!-- Multiple -->
{{#> @form-item}}
  {{> @select}}
{{/ @form-item}}

<!-- Optgroup -->
{{#> @form-item}}
  {{> @select--optgroup}}
{{/ @form-item}}

<!-- Optgroup -->
{{#> @form-item}}
  {{> @select--optgroup}}
{{/ @form-item}}
 
/* Default */
{
  "label": "Select",
  "id": "select-1",
  "options": [
    {
      "option": "Option 1"
    },
    {
      "option": "Option 2"
    },
    {
      "option": "Option 3",
      "selected": true
    },
    {
      "option": "Option 4"
    },
    {
      "option": "Option 5"
    },
    {
      "option": "Option 6"
    }
  ]
}


/* Multiple */
{
  "label": "Select multiple",
  "id": "select-2",
  "options": [
    {
      "option": "Option 1"
    },
    {
      "option": "Option 2",
      "selected": true
    },
    {
      "option": "Option 3"
    },
    {
      "option": "Option 4"
    },
    {
      "option": "Option 5"
    },
    {
      "option": "Option 6"
    }
  ],
  "multiple": true
}


/* Optgroup */
{
  "label": "Select with optgroups",
  "id": "select-3",
  "options": [
    {
      "option": "Option 1"
    },
    {
      "option": "Option 2"
    },
    {
      "option": "Option 3",
      "selected": true
    },
    {
      "option": "Option 4"
    },
    {
      "option": "Option 5"
    },
    {
      "option": "Option 6"
    }
  ],
  "optgroups": [
    {
      "label": "Group 1",
      "options": [
        {
          "option": "Option 1-1"
        },
        {
          "option": "Option 1-2"
        },
        {
          "option": "Option 1-3",
          "selected": true
        }
      ]
    },
    {
      "label": "Group 2",
      "options": [
        {
          "option": "Option 2-1"
        },
        {
          "option": "Option 2-2"
        },
        {
          "option": "Option 2-3"
        }
      ]
    }
  ]
}


/* Optgroup */
{
  "label": "Select multiple with optgroups",
  "id": "select-4",
  "options": [
    {
      "option": "Option 1"
    },
    {
      "option": "Option 2"
    },
    {
      "option": "Option 3",
      "selected": true
    },
    {
      "option": "Option 4"
    },
    {
      "option": "Option 5"
    },
    {
      "option": "Option 6"
    }
  ],
  "multiple": true,
  "optgroups": [
    {
      "label": "Group 1",
      "options": [
        {
          "option": "Option 1-1",
          "selected": true
        },
        {
          "option": "Option 1-2",
          "selected": true
        },
        {
          "option": "Option 1-3"
        }
      ]
    },
    {
      "label": "Group 2",
      "options": [
        {
          "option": "Option 2-1"
        },
        {
          "option": "Option 2-2"
        },
        {
          "option": "Option 2-3"
        }
      ]
    }
  ]
}

Form item select

form-item-select gives the <select> element and the accompanying <label> a container with the following properties:

  • full width of the <select> element within its container (useful for putting inside more complex layouts, like a grid)
  • support for status messages (changes the color of the input itself as well as any help message present)