input--radio

This component only contains an input of type radio, which is visually hidden, as the styling will be done by the corresponding label. This component can therefore not be used on its own, but should always be used via form/form-element.

Information

Folder
src/components/fsk/form/form-element/input/input--radio

Files

Schema
// src/components/fsk/form/form-element/input/input--radio/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/form-element/input/input--radio
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
required:
  - attributes
Mocks
// src/components/fsk/form/form-element/input/input--radio/mocks.yaml

attributes:
  $drupal: true
  id: input--checkbox-default
  value: value
$variants:
  - $name: Invalid
    attributes:
      class:
        - error
      id: input--checkbox-invalid
  - $name: Checked
    attributes:
      checked: true
      id: input--checkbox-checked
  - $name: Disabled
    attributes:
      disabled: true
      id: input--checkbox-disabled
  - $name: Invalid and checked
    attributes:
      checked: true
      class:
        - error
      id: input--checkbox-invalid-and-checked
  - $name: Invalid and disabled
    attributes:
      disabled: true
      class:
        - error
      id: input--checkbox-invalid-and-disabled
  - $name: Checked and disabled
    attributes:
      checked: true
      disabled: true
      id: input--checkbox-checked-and-disabled
  - $name: Checked and disabled and invalid
    attributes:
      checked: true
      disabled: true
      class:
        - error
      id: input--checkbox-checked-and-disabled-and-invalid
Template
// src/components/fsk/form/form-element/input/input--radio/input--radio.html.twig

{% include "@fsk/form/form-element/input/_option/_option.html.twig" with {
  attributes: attributes,
  checked: attributes.checked ?? checked,
  children: children,
  class: attributes.class ?? class,
  disabled: attributes.disabled ?? disabled,
  id: attributes.id ?? id,
  required: attributes.required ?? required,
  type: "radio",
} only %}

Variants

default
Open
Invalid
Open
Checked
Open
Disabled
Open
Invalid and checked
Open
Invalid and disabled
Open
Checked and disabled
Open
Checked and disabled and invalid
Open