D.School Component Library

Select: Home 

<div class="o-select o-select--home o-form__item">
      <label for="select">
          Label
      </label>
      <select id="select" name="select">
          <option value="">Everything</option>
          <option value="">...what's new at the d.school</option>
          <option value="">...getting started in design</option>
          <option value="">...the relationship between design & business</option>
          <option value="">...the future of AI & design</option>
          <option value="">...equity-centered design principles</option>
      </select>
      <span class="o-field-note">
          This is a field note.
      </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": "Everything",
        "bold_text": "Everything"
      },
      {
        "text": "...what's new at the d.school",
        "bold_text": "...what's new"
      },
      {
        "text": "...getting started in design",
        "bold_text": "...getting started"
      },
      {
        "text": "...the relationship between design & business",
        "bold_text": "design & business"
      },
      {
        "text": "...the future of AI & design",
        "bold_text": "AI & design"
      },
      {
        "text": "...equity-centered design principles",
        "bold_text": "...equity-centered design"
      }
    ],
    "field_note": {
      "text": "This is a field note."
    },
    "home": true
  }
}

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