select

// src/components/fsk/form/form-element/input/select/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/form-element/input/select
additionalProperties: false
properties:
  attributes:
    type: object
  options:
    type: array
    items:
      type: object
      properties:
        type:
          type: string
          enum:
            - option
            - optgroup
required:
  - options

// src/components/fsk/form/form-element/input/select/mocks.yaml

attributes:
  $drupal: true
options:
  - type: option
    value: a
    label: Value a
  - type: option
    value: b
    label: Value b
$variants:
  - $name: Invalid
    attributes:
      class:
        - error
      id: select-invalid
  - $name: Disabled
    attributes:
      disabled: true
      id: select-disabled
  - $name: Invalid and disabled
    attributes:
      disabled: true
      class:
        - error
      id: select-invalid-and-disabled
  - $name: With optgroups
    options:
      - type: optgroup
        label: Group a
        options:
          - type: option
            value: a1
            label: Value a1
          - type: option
            value: a2
            label: Value a2
      - type: optgroup
        label: Group b
        options:
          - type: option
            value: b1
            label: Value b1
          - type: option
            value: b2
            label: Value b2

// src/components/fsk/form/form-element/input/select/select.html.twig

{% spaceless %}
  <select
    {{ attributes ? attributes|without("class", "disabled", "required") : "" }}
    class="FskInput FskInput--select {{ classes|join(" ") }}"
    {% if attributes.disabled %} disabled{% endif %}
    {% if attributes.required %} required{% endif %}
    {% if "error" in attributes.class %}aria-invalid="true"{% endif %}
  >
    {% for option in options %}
      {% if option.type == 'optgroup' %}
        <optgroup label="{{ option.label }}">
          {% for sub_option in option.options %}
            <option value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' : '' }}>{{ sub_option.label }}</option>
          {% endfor %}
        </optgroup>
      {% elseif option.type == 'option' %}
        <option value="{{ option.value }}"{{ option.selected ? ' selected="selected"' : '' }}>{{ option.label }}</option>
      {% endif %}
    {% endfor %}
  </select>
{% endspaceless %}