This is a shared component used by form-element/input/input--checkbox
and form-element/input/input--radio
.
It should not be used directly.
src/components/elements/form-element/option
// src/components/elements/form-element/option/schema.yaml
$schema: http://json-schema.org/draft-07/schema#
$id: /elements/form-element/option
additionalProperties: false
properties:
additional_attributes:
type: string
checked:
type: boolean
classes:
type: array
items:
type: string
disabled:
type: boolean
id:
type: string
invalid:
type: boolean
name:
type: string
required:
type: boolean
type:
type: string
enum:
- checkbox
- radio
value:
type: string
// src/components/elements/form-element/option/mocks.yaml
$hidden: true
name: name
$variants:
- $name: Checkbox
type: checkbox
id: input--checkbox
name: input--checkbox[]
- $name: Checkbox invalid
type: checkbox
invalid: true
id: input--checkbox-invalid
name: input--checkbox-invalid[]
- $name: Checkbox checked
type: checkbox
checked: true
id: input--checkbox-checked
name: input--checkbox-checked[]
- $name: Checkbox disabled
type: checkbox
disabled: true
id: input--checkbox-disabled
name: input--checkbox-disabled[]
- $name: Checkbox invalid and checked
type: checkbox
checked: true
invalid: true
id: input--checkbox-invalid-and-checked
name: input--checkbox-invalid-and-checked[]
- $name: Checkbox invalid and disabled
type: checkbox
disabled: true
invalid: true
id: input--checkbox-invalid-and-disabled
name: input--checkbox-invalid-and-disabled[]
- $name: Checkbox checked and disabled
type: checkbox
checked: true
disabled: true
id: input--checkbox-checked-and-disabled
name: input--checkbox-checked-and-disabled[]
- $name: Checkbox checked and disabled and invalid
type: checkbox
checked: true
disabled: true
invalid: true
id: input--checkbox-checked-and-disabled-and-invalid
name: input--checkbox-checked-and-disabled-and-invalid[]
- $name: Radio
type: radio
id: input--radio
name: input--radio
- $name: Radio invalid
type: radio
invalid: true
id: input--radio-invalid
name: input--radio-invalid
- $name: Radio checked
type: radio
checked: true
id: input--radio-checked
name: input--radio-checked
- $name: Radio disabled
type: radio
disabled: true
id: input--radio-disabled
name: input--radio-disabled
- $name: Radio invalid and checked
type: radio
checked: true
invalid: true
id: input--radio-invalid-and-checked
name: input--radio-invalid-and-checked
- $name: Radio invalid and disabled
type: radio
disabled: true
invalid: true
id: input--radio-invalid-and-disabled
name: input--radio-invalid-and-disabled
- $name: Radio checked and disabled
type: radio
checked: true
disabled: true
id: input--radio-checked-and-disabled
name: input--radio-checked-and-disabled
- $name: Radio checked and disabled and invalid
type: radio
checked: true
disabled: true
invalid: true
id: input--radio-checked-and-disabled-and-invalid
name: input--radio-checked-and-disabled-and-invalid
// src/components/elements/form-element/option/option.twig
<input
{{ additional_attributes }}
id="{{ id }}"
value="{{ value }}"
name="{{ name }}"
class="{{ classes|join(" ") }}"
type="{{ type }}"
{% if disabled %}disabled{% endif %}
{% if checked %}checked{% endif %}
{% if required %}required{% endif %}
{% if invalid %}aria-invalid="true"{% endif %}
>
Checkbox invalid mock data
name: input--checkbox-invalid[]
type: checkbox
invalid: true
id: input--checkbox-invalid
Checkbox checked mock data
name: input--checkbox-checked[]
type: checkbox
checked: true
id: input--checkbox-checked
Checkbox disabled mock data
name: input--checkbox-disabled[]
type: checkbox
disabled: true
id: input--checkbox-disabled
Checkbox invalid and checked mock data
name: input--checkbox-invalid-and-checked[]
type: checkbox
checked: true
invalid: true
id: input--checkbox-invalid-and-checked
Checkbox invalid and disabled mock data
name: input--checkbox-invalid-and-disabled[]
type: checkbox
disabled: true
invalid: true
id: input--checkbox-invalid-and-disabled
Checkbox checked and disabled mock data
name: input--checkbox-checked-and-disabled[]
type: checkbox
checked: true
disabled: true
id: input--checkbox-checked-and-disabled
Checkbox checked and disabled and invalid mock data
name: input--checkbox-checked-and-disabled-and-invalid[]
type: checkbox
checked: true
disabled: true
invalid: true
id: input--checkbox-checked-and-disabled-and-invalid
Radio invalid mock data
name: input--radio-invalid
type: radio
invalid: true
id: input--radio-invalid
Radio checked mock data
name: input--radio-checked
type: radio
checked: true
id: input--radio-checked
Radio disabled mock data
name: input--radio-disabled
type: radio
disabled: true
id: input--radio-disabled
Radio invalid and checked mock data
name: input--radio-invalid-and-checked
type: radio
checked: true
invalid: true
id: input--radio-invalid-and-checked
Radio invalid and disabled mock data
name: input--radio-invalid-and-disabled
type: radio
disabled: true
invalid: true
id: input--radio-invalid-and-disabled
Radio checked and disabled mock data
name: input--radio-checked-and-disabled
type: radio
checked: true
disabled: true
id: input--radio-checked-and-disabled
Radio checked and disabled and invalid mock data
name: input--radio-checked-and-disabled-and-invalid
type: radio
checked: true
disabled: true
invalid: true
id: input--radio-checked-and-disabled-and-invalid