Radio Button Component
- name: string - Radio button name attribute (required)
- options: array - Array of options with value and label keys (required)
- selected: string - Currently selected value (optional)
- disabled: boolean - Whether all options are disabled (default: false)
- class: string - Additional CSS classes for the container (optional)
- inline: boolean - Display radio buttons inline (default: false)
All available options for the Radio component
ThemedComponent::make("form/radio")
->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
->canSee('value') //bool - Whether the component should be visible or not (optional)
->class('value') //string - Additional CSS classes for the container (optional)
->disabled('value') //boolean - Whether all options are disabled (default: false)
->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
->inline('value') //boolean - Display radio buttons inline (default: false)
->name('value') //string - Radio button name attribute (required)
->options('value') //array - Array of options with value and label keys (required)
->selected('value') //string - Currently selected value (optional)
->render();
A simple radio button group
echo ThemedComponent::make('form/radio')
->name('gender')
->options([
['value' => 'male', 'label' => 'Male'],
['value' => 'female', 'label' => 'Female'],
['value' => 'other', 'label' => 'Other']
])
->render();
Radio buttons displayed inline with pre-selected value
echo ThemedComponent::make('form/radio')
->name('size')
->options([
['value' => 'sm', 'label' => 'Small'],
['value' => 'md', 'label' => 'Medium'],
['value' => 'lg', 'label' => 'Large']
])
->inline(true)
->selected('md')
->render();
Different radio states: disabled group and individually disabled options
// Disabled radio group
echo ThemedComponent::make('form/radio')
->name('disabled-radio')
->options([
['value' => '1', 'label' => 'Option 1'],
['value' => '2', 'label' => 'Option 2'],
['value' => '3', 'label' => 'Option 3']
])
->disabled(true)
->selected('2')
->render();
// Mixed disabled state
echo ThemedComponent::make('form/radio')
->name('mixed-disabled')
->options([
['value' => '1', 'label' => 'Always enabled'],
['value' => '2', 'label' => 'Disabled option', 'disabled' => true],
['value' => '3', 'label' => 'Also enabled']
])
->render();
The Twig template file for the Radio component
{# Radio Button Component
- name: string - Radio button name attribute (required)
- options: array - Array of options with value and label keys (required)
- selected: string - Currently selected value (optional)
- disabled: boolean - Whether all options are disabled (default: false)
- class: string - Additional CSS classes for the container (optional)
- inline: boolean - Display radio buttons inline (default: false)
#}
<div class="{{ content.class|default('') }}">
{% for option in content.options %}
<div class="form-check {% if content.inline %}form-check-inline{% endif %}">
<input
type="radio"
name="{{ content.name }}"
id="{{ content.name }}_{{ option.value }}"
value="{{ option.value }}"
{% if content.selected == option.value %}checked{% endif %}
{% if content.disabled or option.disabled %}disabled{% endif %}
class="form-check-input"
>
<label class="form-check-label" for="{{ content.name }}_{{ option.value }}">
{{ option.label }}
</label>
</div>
{% endfor %}
</div>