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
.
src/components/fsk/form/form-element/input/input--radio
// 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
// 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
// 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 %}
Invalid and checked mock data
attributes:
$drupal: true
id: input--checkbox-invalid-and-checked
value: value
checked: true
class:
- error
Invalid and disabled mock data
attributes:
$drupal: true
id: input--checkbox-invalid-and-disabled
value: value
disabled: true
class:
- error
Checked and disabled mock data
attributes:
$drupal: true
id: input--checkbox-checked-and-disabled
value: value
checked: true
disabled: true
Checked and disabled and invalid mock data
attributes:
$drupal: true
id: input--checkbox-checked-and-disabled-and-invalid
value: value
checked: true
disabled: true
class:
- error