option

// src/components/elements/form-element/option/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/form-element/option
additionalProperties: false
properties:
  attributes:
    type: string
  checked:
    type: boolean
  classes:
    type: array
    items:
      type: string
  disabled:
    type: boolean
  id:
    type: string
  invalid:
    type: boolean
  name:
    type: string
  required:
    type: boolean
  type:
    type: string
    enum:
      - checkbox
      - radio
  value:
    type: string

// src/components/elements/form-element/option/mocks.yaml

$hidden: true
name: name
$variants:
  - $name: Checkbox
    type: checkbox
    id: input--checkbox
    name: input--checkbox[]
  - $name: Checkbox invalid
    type: checkbox
    invalid: true
    id: input--checkbox-invalid
    name: input--checkbox-invalid[]
  - $name: Checkbox checked
    type: checkbox
    checked: true
    id: input--checkbox-checked
    name: input--checkbox-checked[]
  - $name: Checkbox disabled
    type: checkbox
    disabled: true
    id: input--checkbox-disabled
    name: input--checkbox-disabled[]
  - $name: Checkbox invalid and checked
    type: checkbox
    checked: true
    invalid: true
    id: input--checkbox-invalid-and-checked
    name: input--checkbox-invalid-and-checked[]
  - $name: Checkbox invalid and disabled
    type: checkbox
    disabled: true
    invalid: true
    id: input--checkbox-invalid-and-disabled
    name: input--checkbox-invalid-and-disabled[]
  - $name: Checkbox checked and disabled
    type: checkbox
    checked: true
    disabled: true
    id: input--checkbox-checked-and-disabled
    name: input--checkbox-checked-and-disabled[]
  - $name: Checkbox checked and disabled and invalid
    type: checkbox
    checked: true
    disabled: true
    invalid: true
    id: input--checkbox-checked-and-disabled-and-invalid
    name: input--checkbox-checked-and-disabled-and-invalid[]
  - $name: Radio
    type: radio
    id: input--radio
    name: input--radio
  - $name: Radio invalid
    type: radio
    invalid: true
    id: input--radio-invalid
    name: input--radio-invalid
  - $name: Radio checked
    type: radio
    checked: true
    id: input--radio-checked
    name: input--radio-checked
  - $name: Radio disabled
    type: radio
    disabled: true
    id: input--radio-disabled
    name: input--radio-disabled
  - $name: Radio invalid and checked
    type: radio
    checked: true
    invalid: true
    id: input--radio-invalid-and-checked
    name: input--radio-invalid-and-checked
  - $name: Radio invalid and disabled
    type: radio
    disabled: true
    invalid: true
    id: input--radio-invalid-and-disabled
    name: input--radio-invalid-and-disabled
  - $name: Radio checked and disabled
    type: radio
    checked: true
    disabled: true
    id: input--radio-checked-and-disabled
    name: input--radio-checked-and-disabled
  - $name: Radio checked and disabled and invalid
    type: radio
    checked: true
    disabled: true
    invalid: true
    id: input--radio-checked-and-disabled-and-invalid
    name: input--radio-checked-and-disabled-and-invalid

// src/components/elements/form-element/option/option.twig

<input
	id="{{ id }}"
	value="{{ value }}"
	name="{{ name }}"
	class="{{ classes|join(" ") }}"
	type="{{ type }}"
	{% if disabled %}disabled{% endif %}
	{% if checked %}checked{% endif %}
	{% if required %}required{% endif %}
	{% if invalid %}aria-invalid="true"{% endif %}
>