api_checkboxgroup_properties.md

sidebar_label	Form CheckboxGroup properties
title	JavaScript Form - Checkbox Group Properties
description	You can explore the Properties of the Checkbox Group control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.

CheckboxGroup properties

Usage

{
    type: "checkboxGroup",
    name?: string,
    id?: string, // must be unique if set, auto-generated if not set
    options: {
        rows?: [
            {
                type: "checkbox",
                id?: string, // must be unique if set, auto-generated if not set
                value?: string,
                checked?: boolean, 
                css?: string,
                height?: string | number | "content",
                hidden?: boolean,
                padding?: string | number,
                text?: string,
                width?: string | number | "content",
            },
            // more checkboxes
        ],
        cols?: [
            {
                type: "checkbox",
                id?: string, // must be unique if set, auto-generated if not set
                value?: string,
                checked?: boolean,
                css?: string,
                height?: string | number | "content",
                hidden?: boolean,
                padding?: string | number,
                text?: string,
                width?: string | number | "content",
            },
            // more checkboxes
        ],
        css?: string,
        height?: string | number | "content", // "content" by default
        padding?: string | number, 
        width?: string | number | "content", // "content" by default
    },
    value?: {
        [id: string]: boolean | string,
        // more values
    },
    
    css?: string,
    disabled?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean, // false by default
    padding?: string | number,
    required?: boolean, // false by default
    width?: string | number | "content", // "content" by default
    
    hiddenLabel?: boolean, // false by default
    label?: string,
    labelPosition?: "left"|"top", // "top" by default
    labelWidth?: string | number,

    helpMessage?: string,
    preMessage?: string,
    successMessage?: string,
    errorMessage?: string,
}

Description

CheckboxGroup properties

type	(required) the type of a control, set it to "checkboxGroup"
name	(optional) the name of a control
id	(optional) the id of a control, must be unique if set, auto-generated if not set
options	(required) an object with options of a CheckboxGroup. The object can contain the followingattributes: rows - (optional) arranges checkboxes inside the CheckboxGroup control vertically cols - (optional) arranges checkboxes inside the CheckboxGroup control horizontally css - (optional) adds style classes to a CheckboxGroup height - (optional) the height of a CheckboxGroup padding - (optional) sets padding between a cell and a border of a CheckboxGroup width - (optional) the width of a CheckboxGroup
value	(optional) an object with the initial value of a CheckboxGroup. The value contains a set of key:value pairs where key is the id of a checkbox and value defines the initial state of the checkbox. The option has a higher priority than the checked attribute of a checkbox.
css	(optional) adds style classes to a control
disabled	(optional) defines whether a control is enabled (false) or disabled (true)
height	(optional) the height of a control, "content" by default
hidden	(boolean) defines whether a CheckboxGroup is hidden, false by default
padding	(optional) sets padding between a cell and a border of a CheckboxGroup control
required	(optional) defines whether a control is required, false by default
width	(optional) the width of a control, "content" by default
hiddenLabel	(optional) makes the label invisible, false by default
label	(optional) specifies a label for a control
labelPosition	(optional) defines the position of a label: "left" | "top", "top" by default
labelWidth	(optional) sets the width of the label of a control
helpMessage	(optional) adds a help message to a control
preMessage	(optional) a message that contains instructions for interacting with the control
successMessage	(optional) a message that appears in case of successful validation of the control value
errorMessage	(optional) a message that appears in case of error during validation of the control value

Properties of a Checkbox of CheckboxGroup

type	(required) the type of a control, set it to "checkbox"
id	(optional) the id of a control, must be unique if set, auto-generated if not set
value	(optional) the value of a checkbox
checked	(optional) defines the initial state of a checkbox
css	(optional) adds style classes to a a checkbox
height	(optional) the height of a checkbox
hidden	(optional) defines whether a checkbox is hidden
padding	(optional) sets padding between a cell and a border of a checkbox
text	(optional) the text label of a checkbox
width	(optional) the width of a checkbox

Example

<iframe src="https://snippet.dhtmlx.com/p89u4ovb?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>

Related article: CheckboxGroup