The Checkbox component allows users to select one or multiple options from a set. It supports various states, customization options, and validation rules.
1. Basic Properties
- Name: The unique identifier of the checkbox (e.g.,
Checkbox1). - Label: The text displayed next to the checkbox.
States
- Default Checked: Determines if the checkbox is selected by default.
- Disabled: Makes the checkbox non-interactive.
- Hidden: Hides the checkbox from the UI while keeping it available in logic.
- Required: Ensures the checkbox must be selected before submission.
- Indeterminate: Displays a partially selected state, often used for “Select All” scenarios.
2. Layout
The Layout settings define how the checkbox behaves across responsive screen sizes and spacing relative to other components.
📘 For full details, see Common Properties → Layout.
3. Events
- onChange: Triggered whenever the checkbox value changes (checked/unchecked).
Useful for updating variables, calling APIs, or showing notifications.
📘 For more information, see Actions.
4. Validations
Validation rules ensure the checkbox meets specific conditions (e.g., must be checked).
📘 For detailed validation types and examples, see Validations.
5. Icons
You can customize the checkbox appearance by setting:
- Icon: The icon displayed when the checkbox is unchecked.
- Checked Icon: The icon displayed when the checkbox is selected.
6. Color & Label Placement
- Color: Choose between predefined color themes (
primary,secondary). - Label Placement: Defines where the label appears relative to the checkbox:
top,start,bottom, orend
7. Style
Custom styles can be applied for further UI customization.
📘 For more details, see Common Properties → Style.
✅ With these options, the Checkbox component can be used for single selections, multiple selections, or as part of complex form controls.