Checkbox

Note:

Currently in the beta phase.

A checkbox component, typically used for toggling an option on or off.

Import Module

import kit.ArkUI.*

Child Components

None

Creating the Component

init(?String, ?String, ?CustomBuilder)

public init(name!: ?String = None, group!: ?String = None, indicatorBuilder!: ?CustomBuilder = None)

Function: Creates a checkbox component.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Parameter Name	Type	Required	Default Value	Description
name	?String	No	None	Named parameter. The name of the checkbox.
group	?String	No	None	Named parameter. Specifies the name of the group to which the checkbox belongs (i.e., the name of the CheckboxGroup). Note: This parameter is irrelevant when not used in conjunction with the CheckboxGroup component.
indicatorBuilder	?CustomBuilder	No	None	Named parameter. Configures the checkbox's selected style as a custom UI description. The custom UI description is center-aligned with the Checkbox component. When indicatorBuilder is set to None, it defaults to the unset state. Use in combination with @Builder and the bind method.

Common Attributes/Common Events

Common Attributes: All supported.

Common Events: All supported.

Component Attributes

func select(?Bool)

public func select(value: ?Bool): This

Function: Sets whether the checkbox is selected.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Parameter Name	Type	Required	Default Value	Description
value	?Bool	Yes	-	Whether the checkbox is selected. Initial value: false. When true, the checkbox is selected. When false, the checkbox is not selected.

func selectedColor(?ResourceColor)

public func selectedColor(value: ?ResourceColor): This

Function: Sets the color of the checkbox in the selected state.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Parameter Name	Type	Required	Default Value	Description
value	?ResourceColor	Yes	-	The color of the checkbox in the selected state. Initial value: 0xff007dff. Invalid values are treated as the default value.

func shape(?CheckBoxShape)

public func shape(value: ?CheckBoxShape): This

Function: Sets the shape of the CheckBox component, including circular and rounded square.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Parameter Name	Type	Required	Default Value	Description
value	?CheckBoxShape	Yes	-	Toggles the shape of the CheckBox component between circular and rounded square. Initial value: CheckBoxShape.Circle

Component Events

func onChange(?OnCheckboxChangeCallback)

public func onChange(callback: ?OnCheckboxChangeCallback): This

Function: Triggers this event when the selected state changes.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Parameter Name	Type	Required	Default Value	Description
callback	?OnCheckboxChangeCallback	Yes	-	The callback triggered when the selected state changes. Initial value: { _: Bool => }. - When the Bool value is true, it indicates selected. - When the Bool value is false, it indicates not selected.

Basic Type Definitions

type OnCheckboxChangeCallback

public type OnCheckboxChangeCallback = (Bool) -> Unit

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

Type: (Bool) -> Unit

Example Code

Example 1 (Setting Checkbox Shape)

This example demonstrates circular and rounded square checkbox styles by configuring CheckBoxShape.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*
import kit.PerformanceAnalysisKit.Hilog

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

@Entry
@Component
class EntryView {
    func build(){
        Flex(justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center){
            Checkbox(name: "checkbox1", group: "checkboxGroup")
            .select(true)
            .selectedColor(0xed6f21)
            .shape(CheckBoxShape.Circle)
            .onChange({value: Bool =>
                loggerInfo("Checkbox1 change is" + value.toString())
            })
            .size(width: 50.vp, height: 50.vp)
            Checkbox(name: "checkbox2", group: "checkboxGroup")
            .select(false)
            .selectedColor(0x39a2db)
            .shape(CheckBoxShape.RoundedSquare)
            .onChange({value: Bool =>
                loggerInfo("Checkbox2 change is" + value.toString())
            })
            .width(50.vp)
            .height(50.vp)
        }
        .height(400.vp)
    }
}

Example 2 (Custom Checkbox Style)

This example implements a custom checkbox style.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*

@Entry
@Component
class EntryView {
    func build() {
        Column() {
            Row() {
                Checkbox(name: "checkbox")
                Text("normal")
            }
            Row() {
                Checkbox(name: "mark")
                    .selectedColor(Color.Red)
                    .width(60.vp)
                    .height(60.vp)
                Text("mark")
            }
            Row() {
                Checkbox(name: "mark")
                    .selectedColor(Color.Green)
                    .width(40.vp)
                    .height(40.vp)
                Text("mark")
            }
        }.width(100.percent)
    }
}

Example 3 (Setting Text Checkbox Style)

This example configures the selected style as Text using indicatorBuilder.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*

@Entry
@Component
class EntryView {
    @Builder
    func indicatorA() {
        Column() {
            Text("A").fontColor(Color.White)
        }
    }
    func build() {
        Column() {
            Row() {
                Checkbox(name: "AAA", indicatorBuilder: indicatorA)
                Text("AAA")
            }
            Row() {
                Checkbox(name: "BBB")
                Text("BBB")
            }
            Row() {
                Checkbox(name: "CCC").selectedColor(Color.Red)
                Text("CCC")
            }
            Row() {
                Checkbox(name: "DDD").selectedColor(Color.Blue)
                Text("DDD")
            }
        }.width(100.percent)
    }
}