Form Checkbox Component Documentation

 Checkbox Component
   - name: string - Checkbox name attribute (required)
   - label: string - Label text (required)
   - checked: boolean - Whether checkbox is checked (default: false)
   - value: string - Checkbox value attribute (default: '1')
   - disabled: boolean - Whether the field is disabled (default: false)
   - class: string - Additional CSS classes (optional)
   - id: string - Checkbox ID attribute (optional, defaults to name)

All available options for the Checkbox component

All available options for the Checkbox component


    ThemedComponent::make("form/checkbox")
	->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)
	->checked('value') //boolean - Whether checkbox is checked (default: false)
	->class('value') //string - Additional CSS classes (optional)
	->disabled('value') //boolean - Whether the field is disabled (default: false)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->label('value') //string - Label text (required)
	->name('value') //string - Checkbox name attribute (required)
	->value('value') //string - Checkbox value attribute (default: '1')
	->render();

Basic Checkbox

A simple required checkbox with label

echo ThemedComponent::make('form/checkbox')
    ->name('terms')
    ->label('I agree to the terms and conditions')
    ->required(true)
    ->render();

Checkbox States

Different checkbox states: checked, disabled, and both

// Checked checkbox
echo ThemedComponent::make('form/checkbox')
    ->name('newsletter')
    ->label('Subscribe to newsletter')
    ->checked(true)
    ->render();

// Disabled checkbox
echo ThemedComponent::make('form/checkbox')
    ->name('disabled-checkbox')
    ->label('This option is disabled')
    ->disabled(true)
    ->render();

// Disabled and checked checkbox
echo ThemedComponent::make('form/checkbox')
    ->name('disabled-checked')
    ->label('This option is disabled and checked')
    ->disabled(true)
    ->checked(true)
    ->render();

Custom Value Checkbox

A checkbox with a custom value attribute

echo ThemedComponent::make('form/checkbox')
    ->name('preference')
    ->label('Enable feature X')
    ->value('feature_x')
    ->render();

Checkbox component template

The Twig template file for the Checkbox component

Content of the checkbox.twig file
{# Checkbox Component
   - name: string - Checkbox name attribute (required)
   - label: string - Label text (required)
   - checked: boolean - Whether checkbox is checked (default: false)
   - value: string - Checkbox value attribute (default: '1')
   - disabled: boolean - Whether the field is disabled (default: false)
   - class: string - Additional CSS classes (optional)
   - id: string - Checkbox ID attribute (optional, defaults to name)
#}

<div class="form-check {{ content.class|default('') }}">
    <input
        type="checkbox"
        name="{{ content.name }}"
        id="{{ content.id|default(content.name) }}"
        value="{{ content.value|default('1') }}"
        {% if content.checked %}checked{% endif %}
        {% if content.disabled %}disabled{% endif %}
        class="form-check-input"
    >
    <label class="form-check-label" for="{{ content.id|default(content.name) }}">
        {{ content.label }}
    </label>
</div>