checkboxes

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/checkboxes

Files

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

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

attributes:
  $drupal: true
$hidden: true
$variants:
  - $name: Column
    children:
      $render:
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_1
          children:
            attributes:
              id: input_checkboxes_1
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_2
          children:
            attributes:
              id: input_checkboxes_2
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_3
          children:
            attributes:
              id: input_checkboxes_3
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_4
          children:
            attributes:
              id: input_checkboxes_4
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_5
          children:
            attributes:
              id: input_checkboxes_5
  - $name: Row
    layout: row
    children:
      $render:
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_1b
          children:
            attributes:
              id: input_checkboxes_1b
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_2b
          children:
            attributes:
              id: input_checkboxes_2b
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_3b
          children:
            attributes:
              id: input_checkboxes_3b
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_4b
          children:
            attributes:
              id: input_checkboxes_4b
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#checkbox'
          label:
            attributes:
              for: input_checkboxes_5b
          children:
            attributes:
              id: input_checkboxes_5b
Template
// src/components/fsk/form/checkboxes/checkboxes.html.twig

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

Variants

Column
Open
Row
Open