Form Radio Component Documentation

 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

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();

Basic Radio Group

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();

Inline Radio Group

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();

Radio States

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();

Radio component template

The Twig template file for the Radio component

Content of the radio.twig file
{# 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>