class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Initialize checkbox items
        this.items = [
            "Checkbox item 1",
            "Checkbox item 2",
            "Checkbox item 3"
        ]

        // Add a checkbox group to the main layout.
        this.ckg = ui.addCheckboxGroup(this.main, this.items)

        // Add a callback handler for `onTouch` event
        this.ckg.setOnTouch( this.onTouch )
    }

    onTouch(value, item, index)
    {
        ui.showPopup( `Value of ${ item } is ${ value }` )
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Initialize checkbox items
    items = [
        "Checkbox item 1",
        "Checkbox item 2",
        "Checkbox item 3"
    ]

    # Add a checkbox group to the main layout.
    ckg = ui.addCheckboxGroup(main, items)

    # Add a callback handler for `onTouch` event
    ckg.setOnTouch(onTouch)

def onTouch(value, item, index, event):
    ui.showPopup(f"Value of {item} is {value}")

Copy All Run

Example - Colors

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.childSpacing = "evenly"

        // Initialize the checkbox items
        var list = [
            "Checkbox item 1",
            "Checkbox item 2",
            "Checkbox item 3"
        ]

        // Add a default CheckboxGroup to the main layout
        this.ckg1 = ui.addCheckboxGroup(this.main, list)
        this.ckg1.setOnTouch( this.onTouch )

        // Add a primary CheckboxGroup to the main layout
        this.ckg2 = ui.addCheckboxGroup(this.main, list, "Primary")
        this.ckg2.setOnTouch( this.onTouch )

        // Add a secondary CheckboxGroup to the main layout
        this.ckg3 = ui.addCheckboxGroup(this.main, list, "Secondary")
        this.ckg3.setOnTouch( this.onTouch )
    }

    onTouch(value, item, index)
    {
        ui.showPopup( `Value of ${ item } is ${ value }` )
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    main.childSpacing = "evenly"

    # Initialize the checkbox items
    list = [
        "Checkbox item 1",
        "Checkbox item 2",
        "Checkbox item 3"
    ]

    # Add a default CheckboxGroup to the main layout
    ckg1 = ui.addCheckboxGroup(main, list)
    ckg1.setOnTouch(onTouch)

    # Add a primary CheckboxGroup to the main layout
    ckg2 = ui.addCheckboxGroup(main, list, "Primary")
    ckg2.setOnTouch(onTouch)

    # Add a secondary CheckboxGroup to the main layout
    ckg3 = ui.addCheckboxGroup(main, list, "Secondary")
    ckg3.setOnTouch(onTouch)

def onTouch(value, item, index, event):
    ui.showPopup(f"Value of {item} is {value}")

Copy All Run

Example - Elevated

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Initialize the checkbox list items
        var list = [
            "Checkbox item 1",
            "Checkbox item 2",
            "Checkbox item 3"
        ]

        // Add an elevated checkbox group to the main layout.
        this.ckg = ui.addCheckboxGroup( this.main, list, "Elevated,Secondary", 0.6)

        // Set the label of the CheckboxGroup
        this.ckg.label = "Select as many as you can"

        // Set the elevation of the CheckboxGroup container
        this.ckg.elevation = 4

        // Add a callback handler for `onTouch` event
        this.ckg.setOnTouch( this.onTouch )
    }

    onTouch(value, item, index)
    {
        ui.showPopup( `Value of ${ item } is ${ value }` )
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Initialize the checkbox list items
    list = [
        "Checkbox item 1",
        "Checkbox item 2",
        "Checkbox item 3"
    ]

    # Add an elevated checkbox group to the main layout.
    ckg = ui.addCheckboxGroup(main, list, "Elevated,Secondary", 0.6)

    # Set the label of the CheckboxGroup
    ckg.label = "Select as many as you can"

    # Set the elevation of the CheckboxGroup container
    ckg.elevation = 4

    # Add a callback handler for `onTouch` event
    ckg.setOnTouch(onTouch)

def onTouch(value, item, index, event):
    ui.showPopup(f"Value of {item} is {value}")

Copy All Run

Example - Outlined

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Initialize the checkbox items
        var list = [
            "Checkbox item 1",
            "Checkbox item 2",
            "Checkbox item 3"
        ]

        // Add an outlined checkbox group to the main layout.
        this.ckg = ui.addCheckboxGroup( this.main, list, "Outlined,Secondary", 0.9 )
        this.ckg.setOnTouch( this.onTouch )

        // Set the label of the CheckboxGroup items
        this.ckg.label = "Select as many as you can"

        // Set the cornerRadius to `20`
        this.ckg.cornerRadius = 20
    }

    onTouch(value, item, index)
    {
        ui.showPopup( `Value of ${ item } is ${ value }` )
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Initialize the checkbox items
    list = [
        "Checkbox item 1",
        "Checkbox item 2",
        "Checkbox item 3"
    ]

    # Add an outlined checkbox group to the main layout.
    ckg = ui.addCheckboxGroup(main, list, "Outlined,Secondary", 0.9)
    ckg.setOnTouch(onTouch)

    # Set the label of the CheckboxGroup items
    ckg.label = "Select as many as you can"

    # Set the cornerRadius to `20`
    ckg.cornerRadius = 20

def onTouch(value, item, index, event):
    ui.showPopup(f"Value of {item} is {value}")

Copy All Run

Methods

The following methods are available on the CheckboxGroup object:

addItem( text, index )

animate( anim, duration )

bringForward( zIndex )

destroy()

getCheckedByIndex( index ) → Boolean

getCheckedByName( name ) → Boolean

getCheckedItems() → String

getEnabled( index ) → Boolean

getEnabledByName( name ) → Boolean

getIcon() → Object

getPosition( options ) → Object

getText( index ) → String

gone()

hide()

popItem()

removeItemByIndex( index )

removeItemByName( title )

sendBackward( zIndex )

setBorder( width, clr, style )

setCheckedByIndex( item, bool )

setCheckedByName( name, bool )

setCornerRadius( tl, tr, bl, br, mode )

setEnabled( index, value )

setEnabledByName( name, value )

setIcon( checked, unchecked )

setList( list )

setMargins( left, top, right, bottom, mode )

setOnChange( callback )

setOnContextMenu( callback )

setOnTouch( callback )

setPadding( left, top, right, bottom, mode )

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height )

setTextByIndex( index, val )

setTextByName( name, val )

shiftItem()

show()

Boolean: The item value. Can be `true` or `false`.

Boolean: Values can be `true` or `false`.

Boolean: Values can be `true` or `false`

Boolean: Sets or returns the disabled state of the control.

Boolean: Returns whether the control is visible or not.

Boolean: Sets or returns whether the container is outlined or elevated.

Number: Fraction of the screen width.

Number: Fraction of the screen height.

Number: The index in which to insert the item.

Number: The time in milliseconds.

Number: The z-index. A negative value behaves like `sendBackward` method.

Number: The index of the corresponding item.

Number: The index of the checkbox item.

Number: The index of the list

Number: The index of the corresponding item to remove.

Number: The z-index. A positve value behaves like `bringForward` method.

Number: Border-left thickness in pixels.

Number: The item or index of the item.

Number: Top-left corner radius.

Number: Top-right corner radius.

Number: Bottom-left corner radius.

Number: Bottom-right corner radius.

Number: Fraction of the parent width.

Number: Fraction of the parent height.

Number: Fraction of the component width.

Number: Fraction of the component height. [0-1]

Number: Fraction of the component width. [0-1]

Number: Fraction of the parent width. [0-1]

Number: Fraction of the screen height. [0-1]

Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.

Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.

Number: Fraction of the parent height. [0-1]

Number: The index of the item.

Number: Returns the absolute height of the control in pixels.

Number: Returns the absolute distance of the control from the left in pixels.

Number: Returns the absolute distance of the control from the top in pixels.

Number: Returns the absolute width of the control in pixels.

Number: Sets or returns the border thickness in pixels.

Number: Sets or returns the corner radius in pixels.

Number: Sets or returns the height of the control as a fraction of the parent control.

Number: Sets or returns the size of the checkbox icon.

Number: Returns the distance of the control from the left.

Number: Sets or returns the opacity of the control.

Number: Sets or returns the angle of rotation in degrees.

Number: Sets or returns the space between the checkbox icon and the text.

Number: Sets or returns the size of the checkbox icon. This will also affect the checkbox icon.

Number: Returns the distance of the control from the top.

Number: Sets or returns the width of the control as a fraction of the parent control.

String: comma “,” separated: “Colors: `Default` `Primary` `Secondary`
`Sizes`: `Small` `Medium`
`Icon Position: `Left` or `Right`
`Container`: `Elevated` or `Outlined`
`Corners : `Square`”

String: “The text label for the checkbox.”

String: “The type of animation. Here are the available values
`bounce` `flash` `pulse` `rubberBand` `shakeX` `shakeY` `headShake` `swing` `tada` `wobble` `jello` `heartBeat`
`Back Entrances `backInDown` `backInLeft` `backInRight` `backInUp`
`Back Exits `backOutDown` `backOutLeft` `backOutRight` `backOutUp`
`Bouncing Entrances `bounceIn` `bounceInDown` `bounceInLeft` `bounceInRight` `bounceInUp`
`Bouncing exits `bounceOut` `bounceOutDown` `bounceOutLeft` `bounceOutRight` `bounceOutUp`
`Fading entrances `fadeIn` `fadeInDown` `fadeInDownBig` `fadeInLeft` `fadeInLeftBig` `fadeInRight` `fadeInRightBig` `fadeInUp` `fadeInUpBig` `fadeInTopLeft` `fadeInTopRight` `fadeInBottomLeft` `fadeInBottomRight`
`Fading exits `fadeOut` `fadeOutDown` `fadeOutDownBig` `fadeOutLeft` `fadeOutLeftBig` `fadeOutRight` `fadeOutRightBig` `fadeOutUp` `fadeOutUpBig` `fadeOutTopLeft` `fadeOutTopRight` `fadeOutBottomRight` `fadeOutBottomLeft`
`Flippers `flip` `flipInX` `flipInY` `flipOutX` `flipOutY`
`Lightspeed `lightSpeedInRight` `lightSpeedInLeft` `lightSpeedOutRight` `lightSpeedOutLeft`
`Rotating Entrances `rotateIn` `rotateInDownLeft` `rotateInDownRight` `rotateInUpLeft` `rotateInUpRight`
`Rotating Exits `rotateOut` `rotateOutDownLeft` `rotateOutDownRight` `rotateOutUpLeft` `rotateOutUpRight`
`Specials `hinge` `jackInTheBox` `rollIn` `rollOut`
`Zooming Entrances `zoomIn` `zoomInDown` `zoomInLeft` `zoomInRight` `zoomInUp`
`Zooming Exits `zoomOut` `zoomOutDown` `zoomOutLeft` `zoomOutRight` `zoomOutUp`
`Sliding Entrances `slideInDown` `slideInLeft` `slideInRight` `slideInUp`
`Sliding Exits `slideOutDown` `slideOutLeft` `slideOutRight` `slideOutUp`.”

String: “The index of the corresponding item.”

String: “The checkbox item.”

String: “The mode of the measurements. Values can be `px` or `%`”

String: “The title text of the corresponding checkbox item.”

String: “Border color in hexadecimal form `#rrggbb`”

String: “Border-styles. Values can be `dotted` `dashed` `solid` `double` `groove` `ridge` `inset` and `outset`. Default is `solid`”

String: “The item or index of the item.”

String: “Unit. Values are `px` `rem` or `%`.”

String: “The name of the checkbox item.”

String: “Material icon font”

String: “`px` or `%`”

String: “The size thickness mode. Can be `px`”

String: “Unit of measurement. Can be `px` or `%` or any css unit of measurement.”

String: “The new text to replace.”

String: “The name of the item”

String: “The new text to replace”

String: A hexadecimal color of the form #rrggbb

String: The path to your image file.

String: Sets or returns the border color. Color is in hexadecimal form #rrggbb

String: Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.

String: Sets or returns the material icon font for check stated.

String: Sets or returns the theme color use for the checkbox. Values can be Default Primary or Secondary.

String: Sets or returns the depth of the container.

String: Sets or returns the relative path to the font-family use.

String: Sets or returns the color of the checkbox icon.

String: Sets or returns the label text.

String: Sets or returns the options of the control.

String: Sets or returns the size variant of the Checkbox. Values can be small or medium.

String: Sets or returns the text color in hexadecimal format.

String: Returns the type of the control.

String: Sets or returns the material icon font for uncheck state.

String: Sets or returns the visibility of the control.

Object: The parent layout where to add the CheckboxGroup.

Object: The new list items for the checkbox group.

Object: The pointer event object.

Object: The click event.

Object: Returns the parent layout control.

Object: Returns the position of the control. The returned object has left top right and bottom props.

List: The items to be displayed.

List: An array of indexes corresponding to the checked checkbox items.

List: Sets or returns the padding of each list item. See also setItemPadding method.

List: Sets or returns the list items.

List: Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.

List: Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.

function( values )

function( label, index, event )

function( value, text, index, event )

ckb.addItem
Add or insert an item in the checkbox group

ckb.animate
Animate the component

ckb.bringForward
Bring this component forward by a given z-index

ckb.destroy
Destroy the component

ckb.getCheckedByIndex
Get the current value of the item in the list

ckb.getCheckedByName
Get the current value of the item in the list

ckb.getCheckedItems
Get the list of all checked items

ckb.getEnabled
Get the enabled state of a checkbox item

ckb.getEnabledByName
Get the enabled state of a checkbox item by its name

ckb.getIcon
Get the checked and unchecked icon of the checkbox group

ckb.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom

ckb.getText
Get the text of the item in a given index

ckb.gone
Destroy the component

ckb.hide
Hide the component

ckb.popItem
Removes the last item in the checkbox group

ckb.removeItemByIndex
Removes an item in the checkbox group by its corresponding index

ckb.removeItemByName
Removes an item in the checkbox group by its title name

ckb.sendBackward
Bring this component backward by a given z-index

ckb.setBorder
Sets the border line for the component container

ckb.setCheckedByIndex
Checked or unchecked a given item by its index

ckb.setCheckedByName
Checked or unchecked a given item by its name

ckb.setCornerRadius
Sets the corner radius of the checkbox group

ckb.setEnabled
Enable or disable an item in the checkbox group

ckb.setEnabledByName
Enable or disable a checkbox item by its name

ckb.setIcon
Sets the checked icon and unchecked icon

ckb.setList
Sets a new list of item in the checkbox group

ckb.setMargins
Sets the margin of the component

ckb.setOnChange
Adds a callback function to be called whent there is a change of value

ckb.setOnContextMenu
Adds a callback function on right click

ckb.setOnTouch
Sets a callback function when the checkbox item is touch

ckb.setPadding
Sets the padding component container

ckb.setPosition
Sets the position of the component relative to its parent dimensions

ckb.setScale
Sets the x and y scaling of the component

ckb.setSize
Sets the size of the component

ckb.setTextByIndex
Sets a new text to a given item by its index

ckb.setTextByName
Sets a new text to a given item by its name

ckb.shiftItem
Removes the first item in the checkbox group

ckb.show
Show the component