Back

addCheckboxGroup

JS Py
Hello World
Content:
- Examples
- Properties
- Methods

A checkbox group in UI development is a collection of checkboxes grouped together for related selections or options.

ckb = ui.addCheckboxGroup( parent, list?, options?, width?, height? ) → ui object: CheckboxGroup

Here are the methods available for CheckboxGroup Component

Examples

Example - Basic

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      

Properties

The following properties are available on the CheckboxGroup object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
backColor → String
backImage → String
border → Number
borderColor → String
borderStyle → String
checkIcon → String
color → String
cornerRadius → Number
disabled → Boolean
el → Object
elevation → String
elStyle → String
fontFile → String
height → Number
iconColor → String
iconSize → Number
isVisible → Boolean
itemPadding → List
label → String
left → Number
list → List
margins → List
opacity → Number
options → String
orientation → String
outlined → Boolean
padding → List
parent → Object
position → Object
rotation → Number
sizeVariant → String
spaceBetween → Number
textColor → String
textSize → Number
top → Number
type → String
uncheckIcon → String
visibility → String
width → Number

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( left?, top?, right?, bottom?, clr?, style? )
setCheckedByIndex( item, bool )
setCheckedByName( name, bool )
setCornerRadius( tl?, tr?, bl?, br?, mode='px' )
setEnabled( index, value )
setEnabledByName( name, value )
setIcon( checked, unchecked )
setItemPadding( left, top, right, bottom, mode )
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, mode )
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`
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent height `[0-1]`.
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: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom 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: Left padding of the checkbox item.
Number: Top padding of the checkbox item.
Number: Right padding of the checkbox item.
Number: Bottom padding of the checkbox item.
Number: Left margin. You can also pass string e.g. `12rem`
Number: Top margin. You can also pass string e.g. `12rem`
Number: Right margin. You can also pass string e.g. `12rem`
Number: Bottom margin. You can also pass string e.g. `12rem`
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 parent 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: The index of the item.
String: “A comma separated options.
Theme Color: `Default`”, “ `Primary`”, “ `Secondary`
Sizes: `Small`”, “ `Medium`
Icon Position: `Left`”, “ `Right`
Container: `Elevated`”, “ `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 format `#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: “Unit of measurement. Can be `rem`”, “ `px`”, “ `%`”, “ or `v` for viewport.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”
String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”
String: “The new text to replace.”
String: “The name of the item”
String: “The new text to replace”
Object: The parent layout where to add the CheckboxGroup.
Object: The position of the touch event.
List: The items to be displayed.
List: The new list items for the checkbox group.
List: An array of indexes corresponding to the checked checkbox items.
function( values )
function( label , index , pos )
function( value , text , index , pos )
ckb.absHeight
Returns the absolute height of the control in pixels.
ckb.absLeft
Returns the absolute distance of the control from the left in pixels.
ckb.absTop
Returns the absolute distance of the control from the top in pixels.
ckb.absWidth
Returns the absolute width of the control in pixels.
ckb.addItem
Add or insert an item in the checkbox group.
ckb.animate
Animate the component.
ckb.backColor
A hexadecimal color of the form #rrggbb
ckb.backImage
The path to your image file.
ckb.border
Sets or returns the border thickness in pixels.
ckb.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
ckb.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
ckb.bringForward
Bring this component forward by a given z-index.
ckb.checkIcon
Sets or returns the material icon font for check stated.
ckb.color
Sets or returns the theme color use for the checkbox. Values can be Default Primary or Secondary.
ckb.cornerRadius
Sets or returns the corner radius in pixels.
ckb.destroy
Destroy the component.
ckb.disabled
Sets or returns the disabled state of the control.
ckb.el
Returns the html container element for the control.
ckb.elevation
Sets or returns the depth of the container.
ckb.elStyle
Sets the style of the html container element.
ckb.fontFile
Sets or returns the relative path to the font-family use.
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.height
Sets or returns the height of the control as a fraction of the parent control.
ckb.hide
Hide the component.
ckb.iconColor
Sets or returns the color of the checkbox icon.
ckb.iconSize
Sets or returns the size of the checkbox icon.
ckb.isVisible
Returns whether the control is visible or not.
ckb.itemPadding
Sets or returns the padding of each list item. See also setItemPadding method.
ckb.label
Sets or returns the label text.
ckb.left
Returns the distance of the control from the left.
ckb.list
Sets or returns the list items.
ckb.margins
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.
ckb.opacity
Sets or returns the opacity of the control.
ckb.options
Sets or returns the options of the control.
ckb.orientation
Sets or returns the orientation of the list. Can be "Vertical" or "Horizontal".
ckb.outlined
Sets or returns whether the container is outlined or elevated.
ckb.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
ckb.parent
Returns the parent layout control.
ckb.popItem
Removes the last item in the checkbox group. This will return the item being removed.
ckb.position
Returns the position of the control. The returned object has left top right and bottom props.
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.rotation
Sets or returns the angle of rotation in degrees.
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.setItemPadding
Sets the padding of the checkbox item. See itemPadding property for equivalent setter/getter property.
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 of the component's 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. This will ignore the positioning and flow of controls in the layout.
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. This will return the item being removed.
ckb.show
Show the component.
ckb.sizeVariant
Sets or returns the size variant of the Checkbox. Values can be small or medium.
ckb.spaceBetween
Sets or returns the space between the checkbox icon and the text.
ckb.textColor
Sets or returns the color of the text.
ckb.textSize
Sets or returns the size of the text within the control.
ckb.top
Returns the distance of the control from the top.
ckb.type
Returns the type of the control.
ckb.uncheckIcon
Sets or returns the material icon font for uncheck state.
ckb.visibility
Sets or returns the visibility of the control.
ckb.width
Sets or returns the width of the control as a fraction of the parent control.