# Why can't the CheckBoxGroup component set initial checked options?

**URL:** <https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998>\
**Category:** AppStudio\
**Created:** [June 2, 2026, 2:41pm UTC](https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998 "2026-06-02T14:41:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![liang\_changhong](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@liang\_changhong](https://tech-community.robotics.abb.com/u/liang_changhong)\
**Post date:** [June 2, 2026, 2:41pm UTC](https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998/1 "2026-06-02T14:41:18Z")

</div>

I ran the following code:

Instance.CheckboxGroup\_1.optionItems=‘a|a;b|b;c|c’;  
await Instance.CheckboxGroup\_1.render();  
Instance.CheckboxGroup\_1.checkedIndexes=[0,1];

After the page renders, items a and b are not checked on the UI. How can I resolve this issue?

 ![企业微信截图_1780411154610](https://europe1.discourse-cdn.com/flex005/uploads/robotics1/original/2X/4/4d94a297dbc788d58aa8fdd5161cd30ec0aaa7ad.png)

 ![企业微信截图_17804112468196](https://europe1.discourse-cdn.com/flex005/uploads/robotics1/original/2X/e/e3a598f43efa7216583670a478fb6c38feb714cb.png)

I Test the CheckGroup\_A:

const checkboxGroup = new TComponents.CheckboxGroup\_A(this.container.querySelector(‘.layout-infobox-content’), {

position: ‘absolute’,

zIndex: 1000,

optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`

});

await checkboxGroup.render();

checkboxGroup.selectedIndexes = [0, 1];  
Show OK

but I add on the end

checkboxGroup.onChange= async function() {

console.log(‘Checkbox group changed.’, this.color);

};

It stops working immediately upon display.

const checkboxGroup = new TComponents.CheckboxGroup\_A(null, {

position: ‘absolute’,

zIndex: 1000,

optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`

});

await checkboxGroup.render();

// Set the selected indexes

this.appendChild(checkboxGroup); // this is a layoutInfoBox

checkboxGroup.selectedIndexes = [0, 1];

Not Work

If the initial value has been configured in the property panel on the UI，

Instance.checkboxGroup\_1.selectedIndexes = [0, 1]; Show OK

However, checkedIndexes does not work at all only after dynamically setting the options.

This leaves me at a loss. I normally avoid commenting on component quality, but this implementation is really poorly done.

---

<div class="post-metadata">

**Author:** ![yitong](https://avatars.discourse-cdn.com/v4/letter/y/3da27b/32.png) [@yitong](https://tech-community.robotics.abb.com/u/yitong)\
**Post date:** [June 3, 2026, 1:34am UTC](https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998/2 "2026-06-03T01:34:24Z")

</div>

> **Things we might need to double-check:**
> 
> 1. **Spin up a separate webapp** just to test the API and see if it takes effect immediately. It worked fine on my end during my local test.
> 
> 2. If the component’s refresh stage is unstable and you’re not sure if it triggers properly, you can try **adding a JavaScript delay function (setTimeout)** to see if that helps.

---

<div class="post-metadata">

**Author:** ![liang\_changhong](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@liang\_changhong](https://tech-community.robotics.abb.com/u/liang_changhong)\
**Post date:** [June 3, 2026, 3:43am UTC](https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998/3 "2026-06-03T03:43:34Z")

</div>

new app name webapp2, set a LayoutInfoBox1, place a CheckboxGroup in it, and function in LayoutInfoBox\_1 OnMount event :

Instance.CheckboxGroup\_1.optionItems=‘a|a;b|b;c|c’;

Instance.CheckboxGroup\_1.checkedIndexes=[0,1];

not Checked display

 ![企业微信截图_17804581413626](https://europe1.discourse-cdn.com/flex005/uploads/robotics1/original/2X/6/60b6f1e98f374b238c9118f26006843e7d308237.png)

 ![企业微信截图_1780458200318](https://europe1.discourse-cdn.com/flex005/uploads/robotics1/original/2X/a/a49f6834ac81b7116b77f2939c54693af65e4ee6.png)

---

<div class="post-metadata">

**Author:** ![liang\_changhong](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@liang\_changhong](https://tech-community.robotics.abb.com/u/liang_changhong)\
**Post date:** [June 3, 2026, 4:00am UTC](https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998/4 "2026-06-03T04:00:30Z")

</div>

Could you tell me under what circumstances it works properly and how you performed your test?

---

<div class="post-metadata">

**Author:** ![liang\_changhong](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@liang\_changhong](https://tech-community.robotics.abb.com/u/liang_changhong)\
**Post date:** [June 3, 2026, 6:38am UTC](https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998/5 "2026-06-03T06:38:49Z")

</div>

I found in the OnMount event, at the end add Instance.CheckBoxGroup\_1.onChange=function(){ console.log(this.color};  
The initial values never display correctly.

---

<div class="post-metadata">

**Author:** ![yitong](https://avatars.discourse-cdn.com/v4/letter/y/3da27b/32.png) [@yitong](https://tech-community.robotics.abb.com/u/yitong)\
**Post date:** [June 3, 2026, 8:37am UTC](https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998/6 "2026-06-03T08:37:27Z")

</div>

I think you are encountering an issue with timing render … Because the render mechanism of components is an asynchronous rendering mechanism implemented with a queue (this can be seen in the source code of the web app deployed by AppStudio v1.3.0) .

In some cases, complex components may be rendered twice in succession, which is not the expected behavior. We are currently investigating such issues.Just like your operation, rendering the CheckboxGroup twice in succession( **One assignment Instance.xxx = xxx means one render.** )

✨✨✨✨✨ Use `setProps` to update multiple properties at once, which is also officially recommended by AppStudio. [Namespace: How to update component properties](https://abbissp01sastaasblb0749.blob.core.windows.net/appstudioproduct/allApiDocs/1.3.0/apiDocs/usage/How%2520to%2520update%2520component%2520properties.html) But it is currently not compatible with the checkboxgroup component… because its checkedIndexes attribute is not a attribute in `props`…

Thank you for your feedback. We have identified this as a bug in version v1.3.0…

**Workaround** : Use JavaScript’s delay function. This is straightforward, but once the project becomes more complex, it tends to get out of control.

```js

Instance.CheckboxGroup_1.optionItems = 'a|a;b|b;c|c';

setTimeout(() => {
    Instance.CheckboxGroup_1.checkedIndexes = [0, 1];
}, 500);

```

---

<div class="post-metadata">

**Author:** ![liang\_changhong](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@liang\_changhong](https://tech-community.robotics.abb.com/u/liang_changhong)\
**Post date:** [June 3, 2026, 8:44am UTC](https://tech-community.robotics.abb.com/t/why-cant-the-checkboxgroup-component-set-initial-checked-options/14998/7 "2026-06-03T08:44:29Z")

</div>

Thanks， the CheckBoxGroup work OK