City of Ghent Style Guide

Select

When to use this component

Use the select component to let users select one option and no more from a long list of options.

When not to use this component

Do not use the select component when there are better alternatives than using a select component.

  • When possible, reduce and simplify the list of options to present fewer options to the user.
  • When users should only be able to select one option and no more, try to use the radios component instead.

Do not use the select component when you need to help users:

  • Select one or more options.
  • Toggle a single option on or off.

In these cases, use the checkboxes component (for a single option or a short list of options) or the checkboxes with filter component (for a long list of options) instead.

How it works

  • The select component allows users to select one option and no more from a long list of options.
  • The options can be grouped in option groups.
  • The first option can be a placeholder option that indicates to the user what to do, for instance, “Select a value”. The placeholder option is not actually an option. When the user does not select another, real option, no option is selected. When use the placeholder option is selected by default and disabled. The user can only select another, real option.

Usage, behavior, layout and validation

The select component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component examples and documentation.

Select 

{% render '@form-item' with _context %}
 
<!-- Default -->
<div class="form-item ">
      <label for="select">select
          <span class="label-optional">
              Optional
          </span>
      </label>
      <div class="field-message " id="select-description">
          Optional field description.<br> --- <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consectetur eveniet illo porro quis sint.
          <div class="accolade "></div>
      </div>

      <div class="form-columns">
          <div class="form-item-column">
              <select name="select" id="select">

                  <option>Option 1</option>

                  <option>Option 2</option>

                  <optgroup label="Option group">
                      <option>Option 3</option>
                      <option>Option 4</option>
                  </optgroup>

              </select>
          </div>
          <div class="form-item-column"></div>
      </div>
  </div>


<!-- Disabled -->
<div class="form-item ">
      <label for="select--disabled">disabled
          <span class="label-optional">
              Optional
          </span>
      </label>
      <div class="field-message " id="select--disabled-description">
          Optional field description.<br> --- <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consectetur eveniet illo porro quis sint.
          <div class="accolade "></div>
      </div>

      <div class="form-columns">
          <div class="form-item-column">
              <select name="select--disabled" id="select--disabled" disabled="true">

                  <option>Option 1</option>

                  <option>Option 2</option>

                  <optgroup label="Option group">
                      <option>Option 3</option>
                      <option>Option 4</option>
                  </optgroup>

              </select>
          </div>
          <div class="form-item-column"></div>
      </div>
  </div>


/* Default */
{
  "id": "select",
  "label": "select",
  "input_component": "input-select",
  "options": [
    {
      "label": "Option 1"
    },
    {
      "label": "Option 2"
    },
    {
      "optgroup": true,
      "label": "Option group",
      "optgroupoptions": [
        {
          "label": "Option 3"
        },
        {
          "label": "Option 4"
        }
      ]
    }
  ]
}


/* Disabled */
{
  "id": "select--disabled",
  "label": "disabled",
  "input_component": "input-select",
  "options": [
    {
      "label": "Option 1"
    },
    {
      "label": "Option 2"
    },
    {
      "optgroup": true,
      "label": "Option group",
      "optgroupoptions": [
        {
          "label": "Option 3"
        },
        {
          "label": "Option 4"
        }
      ]
    }
  ],
  "disabled": true
}