D.School Component Library

Select: Error 

<div class="o-select o-select--home is-error o-form__item">
      <label for="select">
          Label
      </label>
      <select id="select" name="select">
          <option value="select-one">Select one</option>
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
      </select>
      <span class="o-notification">
          <span class="o-notification__icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.5 23C18.3 23 23 18.3 23 12.5C23 6.7 18.3 2 12.5 2C6.7 2 2 6.7 2 12.5C2 18.3 6.7 23 12.5 23ZM12.5 18.7C11.67 18.7 11 18.03 11 17.2C11 16.37 11.67 15.7 12.5 15.7C13.33 15.7 14 16.37 14 17.2C14 18.03 13.33 18.7 12.5 18.7ZM11.5 6.25H13.5L14.24 7.11L13.24 13.86H11.76L10.76 7.11L11.5 6.25Z" />
              </svg>
          </span>
          This is an error message.
      </span>
  </div>
 
{% set base_class = select.base_class|default('o-select') %}
{% if select.options %}
  <div class="{{ bem(base_class, select.element, select.modifiers, select.extra) }}{{ select.error ? ' is-error' }}{{ select.attributes.disabled ? ' is-disabled' }} o-form__item" {{ attributes(select.container.attributes) }}>
    {% if select.label %}
      <label for="{{ select.name }}" {{ select.label_hidden ? ' class="is-visually-hidden"' }}>
        {{ select.label }}
        {% if select.attributes.required %}
          <span class="o-asterisk">*</span>
        {% endif %}
      </label>
    {% endif %}
    <select id="{{ select.name }}" name="{{ select.name }}" {{ attributes(select.attributes) }}>
      {% for option in select.options %}
        <option value="{{ option.value|lower|replace({' ':'-'}) }}" {{ attributes(option.attributes)}}>{{ option.text }}</option>
      {% endfor %}
    </select>
    {% include "@field-note" with select %}
    {% include "@notification" with select %}
  </div>
{% endif %}
 
{
  "select": {
    "name": "select",
    "label": "Label",
    "modifiers": [
      "home"
    ],
    "options": [
      {
        "text": "Select one",
        "value": "select-one"
      },
      {
        "text": "Option 1",
        "value": "option-1"
      },
      {
        "text": "Option 2",
        "value": "option-2"
      }
    ],
    "field_note": false,
    "error": true,
    "notification": {
      "text": "This is an error message."
    }
  }
}

Field label and field notes aren’t yet defined in the design system, but they are included here by default.