Select theme:

Material 3

CheckBoxList (Angular)link

This guide demonstrates how to use the CheckBoxList component.

CheckBoxList Propertieslink

NameTypeDefaultDescription
Namestring'checkboxlist' + index suffixUnique name of the CheckBoxList.
OptionsarraynullCheckBoxList options.
ValuestringnullCheckBoxList value.
Orientationstring'horizontal''horizontal' or 'vertical'.
Disabledboolean/expressionfalseIs CheckBoxList disabled.
Visibleboolean/expressiontrueIs CheckBoxList visible.

image

CheckBoxList Eventslink

NameTypeDefaultDescription
ChangeeventnullChange event of the CheckBoxList. Selected value(s) as event argument.

image

For more info about event actions please visit event actions in our documentation.

Angular declarationlink

<rz-checkboxlist #checkboxlist0 [(ngModel)]="selectedOptions" name="checkboxlist0" (change)="checkboxlist0Change($event)">
  <rz-checkboxlist-option text="Option 1" value="1">
  </rz-checkboxlist-option>
  <rz-checkboxlist-option text="Option 2" value="2">
  </rz-checkboxlist-option>
  <rz-checkboxlist-option text="Option 3" value="3">
  </rz-checkboxlist-option>
</rz-checkboxlist>

Get started today

Radzen is free to use. You can also test the premium features for 15 days.

Download Now
© 2016-2025 Radzen Ltd. All Rights Reserved.
Designed and developed with ❤️ in Radzen Blazor Studio.

Select theme:

Material 3