CheckboxGroup

Note:

Currently in the beta phase.

A checkbox group component used to control the select-all or deselect-all state of checkboxes.

Import Module

import kit.ArkUI.*

Child Components

None

Creating the Component

init(?String)

public init(group!: ?String = None)

Function: Creates a checkbox group that can control the select-all or deselect-all state of checkboxes within the group. Checkboxes and CheckboxGroups with the same group value belong to the same group.

When used with cached components (e.g., List), the selected state of uncreated checkboxes needs to be manually controlled by the application.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

Parameters:

Parameter	Type	Required	Default	Description
group	?String	No	None	Named parameter. The group name of the checkboxes.

Common Attributes/Common Events

Common Attributes: All supported.

Common Events: All supported.

Component Attributes

func selectAll(?Bool)

public func selectAll(value: ?Bool): This

Function: Sets whether to select all checkboxes. If the Checkbox in the same group explicitly sets the select attribute, the Checkbox's setting takes precedence.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

Parameters:

Parameter	Type	Required	Default	Description
value	?Bool	Yes	-	Whether to select all. Initial value: false. When true, all checkboxes in the group are selected. When false, none are selected.

func selectedColor(?ResourceColor)

public func selectedColor(value: ?ResourceColor): This

Function: Sets the color for the selected or partially selected state.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

Parameters:

Parameter	Type	Required	Default	Description
value	?ResourceColor	Yes	-	The color for the selected or partially selected state.

Component Events

func onChange(?OnCheckboxGroupChangeCallback)

public func onChange(callback: ?OnCheckboxGroupChangeCallback): This

Function: Triggers a callback when the selected state of the CheckboxGroup or any checkbox within the group changes.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

Parameters:

Parameter	Type	Required	Default	Description
callback	?OnCheckboxGroupChangeCallback	Yes	-	Information about the checkbox group. Initial value: { _ => }

Basic Type Definitions

class CheckboxGroupResult

public class CheckboxGroupResult {
    public var name: Array<String>
    public var status: SelectStatus
    public init(
        status: SelectStatus,
        name: Array<String>
    )
}

Function: Information about the selected state of a checkbox group.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

var name

public var name: Array<String>

Function: Names of all selected checkboxes in the group.

Type: Array<String>

Read/Write: Readable and Writable

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

var status

public var status: SelectStatus

Function: The selection status.

Type: SelectStatus

Read/Write: Readable and Writable

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

init(SelectStatus, Array<String>)

public init(
    status: SelectStatus,
    name: Array<String>
)

Function: Constructs information about the selected state of a checkbox group.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

Parameters:

Parameter	Type	Required	Default	Description
status	SelectStatus	Yes	-	The selection status.
name	Array<String>	Yes	-	Names of all selected checkboxes in the group.

type OnCheckboxGroupChangeCallback

public type OnCheckboxGroupChangeCallback = (CheckboxGroupResult) -> Unit

Function: Type alias for (CheckboxGroupResult) -> Unit.

Type: (CheckboxGroupResult) -> Unit

Example Code

Example 1 (Setting Up a Checkbox Group)

This example demonstrates how to control the select-all or deselect-all state of checkboxes.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.hilog.*
import ohos.arkui.state_macro_manage.*
import std.collection.ArrayList

func loggerInfo(str: String) {
    Hilog.info(0, "CangjieTest", str)
}

func formatNames(names: Array<String>): String {
    var result = ""
    for(name in names) {
        result += name + ";"
    }
    result
}

@Entry
@Component
class EntryView {
    func build() {
        Column(){
            Flex(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center) {
                CheckboxGroup(group:"checkboxGroup")
                .size(width: 50.vp, height: 50.vp)
                .selectedColor(0xed6f21)
                .selectAll(false)
                .onChange({ val =>
                    loggerInfo("checkboxGroup onChange names:" + formatNames(val.name))
                })

                Text("Select All").fontSize(50)
            }
            Flex(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center) {
                Checkbox(name: "checkbox1", group:"checkboxGroup")
                .size(width: 50.vp, height: 50.vp)

                Text("checkbox1").fontSize(50)
            }

            Flex(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center) {
                Checkbox(name: "checkbox2", group:"checkboxGroup")
                .size(width: 50.vp, height: 50.vp)

                Text("checkbox2").fontSize(50)
            }
        }
    }
}

Example 2 (Custom Checkmark Style)

This example demonstrates how to customize the checkmark style of a checkbox group by configuring the mark attribute.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.hilog.*
import ohos.arkui.state_macro_manage.*
import std.collection.ArrayList

func loggerInfo(str: String) {
    Hilog.info(0, "CangjieTest", str)
}

func formatNames(names: Array<String>): String {
    var result = ""
    for(name in names) {
        result += name + ";"
    }
    result
}

@Entry
@Component
class EntryView {
    func build() {
        Column(){
            Flex(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center) {
                CheckboxGroup(group:"checkboxGroup1")
                .size(width: 50.vp, height: 50.vp)
                .selectedColor(0xed6f21)
                .selectAll(true)
                .onChange({ val =>
                    loggerInfo("checkboxGroup1 onChange names:" + formatNames(val.name))
                })

                Text("Select All").fontSize(50)
            }
            Flex(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center) {
                Checkbox(name: "checkbox1", group:"checkboxGroup1")
                .size(width: 50.vp, height: 50.vp)

                Text("checkbox1").fontSize(50)
            }

            Flex(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center) {
                Checkbox(name: "checkbox2", group:"checkboxGroup1")
                .size(width: 50.vp, height: 50.vp)

                Text("checkbox2").fontSize(50)
            }

            Flex(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center) {
                Checkbox(name: "checkbox3", group:"checkboxGroup1")
                .size(width: 50.vp, height: 50.vp)

                Text("checkbox3").fontSize(50)
            }
        }
    }
}