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
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();
A simple required checkbox with label
echo ThemedComponent::make('form/checkbox')
->name('terms')
->label('I agree to the terms and conditions')
->required(true)
->render();
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();
A checkbox with a custom value attribute
echo ThemedComponent::make('form/checkbox')
->name('preference')
->label('Enable feature X')
->value('feature_x')
->render();
The Twig template file for the Checkbox component
{# 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>