select

// src/components/elements/select/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/select
additionalProperties: false
required:
  - options
properties:
  attributes:
    type: string
  classes:
    type: array
    items:
      type: string
  disabled:
    type: boolean
  id:
    type: string
  invalid:
    type: boolean
  required:
    type: boolean
  options:
    type: array
    items:
      type: object
      properties:
        type:
          type: string
          enum:
            - option
            - optgroup

// src/components/elements/select/mocks.yaml

id: select-default-id
options:
  - type: option
    value: a
    label: Value a
  - type: option
    value: b
    label: Value b
$variants:
  - $name: Invalid
    invalid: true
    id: select-invalid
  - $name: Disabled
    disabled: true
    id: select-disabled
  - $name: Invalid and disabled
    disabled: true
    invalid: true
    id: select-invalid-and-disabled
  - $name: With optgroups
    id: select-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/elements/select/select.twig

{% apply spaceless %}
	<select
		{{ attributes }}
		class="Input Input--select {{ classes|join(" ") }}"
		{% if disabled %} disabled{% endif %}
		{% if required %} required{% endif %}
		{% if invalid %}aria-invalid="true"{% endif %}
		{% if id %}id="{{ id }}"{% 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>
{% endapply %}