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).
src/components/fsk/form/radios
// 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
// 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
// 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 %}
Column mock data
attributes:
$drupal: true
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
Row mock data
attributes:
$drupal: true
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