radios

This component can be used when multiple checkboxes belong together. By default the checkboxes are rendered vertically, by passing layout: row they would be rendered vertically (and wrap if not enough space is available).

Information

Folder
src/components/fsk/form/radios

Files

Schema
// src/components/fsk/form/radios/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/radios
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
  classes:
    type: array
    items:
      type: string
  layout:
    type: string
    enum:
      - col
      - row
required:
  - children
Mocks
// src/components/fsk/form/radios/mocks.yaml

attributes:
  $drupal: true
$hidden: true
$variants:
  - $name: Column
    children:
      $render:
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_1
          children:
            attributes:
              name: inputs
              id: input_radios_1
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_2
          children:
            attributes:
              name: inputs
              id: input_radios_2
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_3
          children:
            attributes:
              name: inputs
              id: input_radios_3
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_4
          children:
            attributes:
              name: inputs
              id: input_radios_4
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_5
          children:
            attributes:
              name: inputs
              id: input_radios_5
  - $name: Row
    layout: row
    children:
      $render:
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_1b
          children:
            attributes:
              name: inputsb
              id: input_radios_1b
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_2b
          children:
            attributes:
              name: inputsb
              id: input_radios_2b
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_3b
          children:
            attributes:
              name: inputsb
              id: input_radios_3b
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_4b
          children:
            attributes:
              name: inputsb
              id: input_radios_4b
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#radio'
          label:
            attributes:
              for: input_radios_5b
          children:
            attributes:
              name: inputsb
              id: input_radios_5b
Template
// src/components/fsk/form/radios/radios.html.twig

{% include "@fsk/form/_options/_options.html.twig" with {
  attributes: attributes,
  children: children,
  classes: classes,
  layout: layout,
  type: "radios"
} only %}

Variants

Column
Open
Row
Open