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: object
  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 %}
	<div class="u-relative">
		<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>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 9" aria-hidden="true">
			<path fill="none" stroke-width="1.5" d="M1 1L7 7L13 1">
		</svg>
	</div>
{% endapply %}