Checkbox

The Checkbox component can be used in any form to provide a set of checkboxes.

Schema

[
    {
        "name": "select-frameworks",
        "meta": {
            "displayName": "Select Frameworks",
            "displayType": "checkbox",
            "config": { "multiple": true },
            "readOnly": false,
            "className": "test",
            "isDisabled": false,
            "value": ["react"],
            "options": [
                {
                    "label": "React",
                    "value": "react"
                },
                {
                    "label": "Vue",
                    "value": "vue"
                },
                {
                    "label": "Svelte",
                    "value": "svelte"
                }
            ],
            "htmlProps": {
                "disabled": true,
                "allowDynamic": true
            },
            "validation": {
                "required": true
            }
        }
    }
]

Example

Select Frameworks

ReactVueSvelte

---

---

Form Data:

{}

Field Properties

Properties used by this field (inside meta field in schema)

Name	Description	Type
name	The unique identifier for the checkbox control instance.	string
displayName	A string that sets the display name of the checkbox control.	string
displayType	A string indicating the type of control, which is "checkbox" in this case.	string
description	A string providing additional information or instructions about the checkbox control.	string
value	The initial value of the selected checkboxes.	array
options	An array of objects representing the checkbox options. Each object should contain:	array of objects
label	The display label for the checkbox (within options).	string
value	The value of the checkbox (within options).	any
validation	An object for validation rules.	object
required	A boolean indicating if the checkbox control is required (within validation).	boolean
readOnly	A readonly field is not editable and value cannot be changed	boolean
config	An object that configures advanced properties.	object

config` Object

Name	Description	Type
multiple	Allow users to select multiple options	boolean

value set to first option

[
    {
        "name": "select-frameworks",
        "meta": {
            "displayName": "Select your libraries",
            "displayType": "checkbox",
            "description": "A normal description for the group",
            "value": ["react"],
            "options": [
                {
                    "label": "React",
                    "value": "react"
                },
                {
                    "label": "Vue",
                    "value": "vue"
                },
                {
                    "label": "Svelte",
                    "value": "svelte"
                }
            ],
            "validation": {
                "required": true
            }
        }
    }
]

required set to false

[
    {
        "name": "select-frameworks",
        "meta": {
            "displayName": "Select your libraries",
            "displayType": "checkbox",
            "description": "A normal description for the group",
            "options": [
                {
                    "label": "React",
                    "value": "react"
                },
                {
                    "label": "Vue",
                    "value": "vue"
                },
                {
                    "label": "Svelte",
                    "value": "svelte"
                }
            ],
            "validation": {
                "required": false
            }
        }
    }
]

single checkbox

[
    {
        "name": "accept-terms",
        "meta": {
            "displayName": "Accept Terms and Conditions",
            "displayType": "checkbox",
            "description": "Please accept the terms and conditions to proceed.",
            "value": false,
            "options": [
                {
                    "label": "I agree",
                    "value": true
                }
            ],
            "validation": {
                "required": true
            }
        }
    }
]