options

// src/components/elements/options/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/options
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
  classes:
    type: array
    items:
      type: string
  layout:
    type: string
    enum:
      - col
      - row
  type:
    type: string
    enum:
      - checkboxes
      - radios
required:
  - children

// src/components/elements/options/mocks.yaml

$variants:
  - $name: Default
    children:
      $render:
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input1
            value: input1
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input1
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input2
            value: input2
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input2
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input3
            value: input3
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input3
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input4
            value: input4
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input4
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input5
            value: input5
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input5
  - $name: Row
    layout: row
    children:
      $render:
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input6
            value: input6
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input6
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input7
            value: input7
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input7
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input8
            value: input8
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input8
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input9
            value: input9
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input9
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input10
            value: input10
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input10

// src/components/elements/options/options.twig

{% set content %}
	<div{{ attributes }} class="Options{% if type %} Options--{{ type }}{% endif %} Options--{{ layout|default("col") }} {{ classes|join(" ") }}">{{ children }}</div>
{% endset %}

{% include "@elements/form-element/form-element.twig" with {
	children: content,
} only %}