Select

<div class="Select flow--2xs">
    <label class="Select__label small " for="selectId">
        Label
    </label>
    <div class="Select__select-wrapper">
        <select id="selectId" name="selectName" class="Select__select Input " onchange="">
            <option class="Select__option">
                Select
            </option>
            <option value="opt1">
                Option 1
            </option>
            <option value="opt2">
                Option 2
            </option>
        </select>
    </div>
</div>
{% set hasErrors = errors is defined and (errors|length) %}

<div class="Select flow--2xs">
  <label class="Select__label small {{
    showLabel is defined and not showLabel
      ? 'vh'
    }}"
    for="{{ id }}">
    {{ label }}
  </label>
  <div class="Select__select-wrapper">
    <select id="{{ id }}"
      name="{{ name }}"
      class="Select__select Input {{ hasErrors ? 'Input--error' }}"
      onchange="{{ onchange }}">
      {% for option in options %}
        {% set attributes = {
          value: option.value,
          selected: option.selected,
          class: 'Select__option'
        } %}
        <option {{ attr(attributes) }}>
          {{ option.label }}
        </option>
      {% endfor %}
    </select>
  </div>
  {% if hasErrors %}
    {% include '@field-errors' with {
      errors: errors
    } %}
  {% endif %}
</div>
{
  "name": "selectName",
  "id": "selectId",
  "label": "Label",
  "showLabel": true,
  "options": [
    {
      "label": "Select",
      "value": ""
    },
    {
      "label": "Option 1",
      "value": "opt1"
    },
    {
      "label": "Option 2",
      "value": "opt2"
    }
  ]
}
  • Content:
    .Select {
      &__label {
        font-weight: bold;
      }
    
      &__select-wrapper {
        position: relative;
    
        select {
          appearance: none;
          cursor: pointer;
          width: 100%;
        }
    
        &::after {
          content: '';
          position: absolute;
          height: 0.75rem;
          width: 0.75rem;
          top: 50%;
          right: var(--space-xs);
          margin-top: -0.375rem;
          background: url('/v6-assets/img/icons/icon-select-down.svg') no-repeat
            center center;
          background-size: contain;
          pointer-events: none;
        }
      }
    }
    
  • URL: /components/raw/select/select.css
  • Filesystem Path: src/templates/components/select/select.css
  • Size: 536 Bytes

No notes defined.