ChoiceChips
The ChoiceChips widget is used to allow the selection of a single chip from a group of chips. Each chip represents has an icon and text.
You can use the ChoiceChips widget to show the options that can be used to filter a list or to change the UI based on selection.

ChoiceChips
To add the ChoiceChips widget to your project:
Simply drag the ChoiceChips widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
The ChoiceChips widget adds a single option named Option 1 by default.

To change the name and icon of the option:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor (on the right side of your screen) and scroll down to the Define Options section.
- Find the Option 1 property and change the name to Flight.
- Click on the button named Train Outlined then search and select the icon name with flight.
.gif?alt=media&token=4d8f594f-8446-4d96-9ca4-88e9a26ea4e6)
To add or remove the option from the ChoiceChips:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor (on the right side of your screen) and scroll down to the Define Options section.
- Click on the Add Option text.
- Enter the name in Option 2 Text to show the option name.
- Set the icon by clicking on the None button then search and select the icon.
- To remove the option, simply click on the cancel icon () displayed in the Option name property.
.gif?alt=media&token=cb933a9b-cb10-4498-9ab5-e4841a643fe7)
You might want to allow users to clear all selections or select all choice chips in one go. You can do so by adding the following action.
When you run the app, the first option is selected by default. You can change this selection using the Initial Option property.
To change the default selection:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Initial Option property.
- Enter the name of the option in the Initial Option property. For example, entering a value as Train will select the second option in the following visual.
.gif?alt=media&token=7bac733f-ff1a-46c8-94ec-3ddd339dcd2a)
You might want to allow users to select multiple choices to filter the result.
To allow multiselect, select the ChoiceChips widget, move to the properties panel, find the Allow Multiselect property and enable it.

Allow mulitselect
To add a space between the chips:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Chip Spacing property.
- Change the value in the Chip Spacing property to adjust the space distribution between the chips.
.gif?alt=media&token=0ea7b043-d8e9-4522-bea7-b77d5474dbe8)
Various properties under the Selected Chip Style section allow you to customize the selected chip to match your design.
To change the background color for the selected chip, select ChoiceChips > move to the Properties Panel > Selected Chip Style section and change the Color property.
To customize the icon, select ChoiceChips > move to the Properties Panel > Selected Chip Style > change Icon Color and Size.
To change the elevation (depth or Z-axis) of the ChoiceChips
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Selected Chip Style section.
- Find the Elevation property and enter the value to see the drop shadow effect below the selected chip. The Higher value sets the bigger size of the shadow.
.gif?alt=media&token=1e08bad3-0660-4c25-9ed8-e42889809c17)
Label Padding adds space around the Text of the chip.
To add a Label Padding in the chip:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Selected Chip Style section.
- Find the Label Padding property and enter the values for L(left), T(top), R(right), and B(bottom) input boxes.
.gif?alt=media&token=22eb5b4a-49eb-4654-b66a-9bc194d52c0f)
To change the text style for the selected chip, select ChoiceChips > move to the Properties Panel > Selected Chip Style section > change the Selected Text Style.
Various properties under the Unselected Chip Style section allow you to customize the unselected chip to match your design.
To change the background color for the unselected chip:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Unelected Chip Style section.
- Find the Color property, click on the box next to White, select the color, and then click Use Selected Color or click on White and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
.gif?alt=media&token=be301a7f-ca4e-4cc6-8270-35f2604c419d)
To change the icon size for the unselected chip:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Unselected Chip Style section.
- Find the Icon Color property, click on the box next to White, select the color, and then click Use Selected Color or click on White and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
- Enter the value in the Icon Size property.
.gif?alt=media&token=9388f136-856f-4a1b-be33-75f16cfc7ff1)
To change the elevation (depth or Z-axis) of the ChoiceChips
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Unselected Chip Style section.
- Find the Elevation property and enter the value to see the drop shadow effect below the unselected chip. The Higher value sets the bigger size of the shadow.
.gif?alt=media&token=0fb0df8c-5220-4ab5-ac1c-472f8a3e135e)
Label Padding adds space around the Text of the chip.
To add a Label Padding in the chip:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Unselected Chip Style section.
- Find the Label Padding property and enter the values for L(left), T(top), R(right), and B(bottom) input boxes.
.gif?alt=media&token=eb74bc34-59bd-4fce-85a1-0e751df94fa9)
To change the text style for the unselected chip:
- Select ChoiceChips from the widget tree or from the canvas area.
- Move to the Property Editor and scroll down to the Unselected Text Style section (Under the Unselected Chip Style section).
- Click on the button below the Font Family. Choose the font from the list. If the list doesn't contain the font you are looking for, you can search for it.
- To change the color, find the Text Color property, Click on the box next to the already selected color, select the color, and then click Use Unselected Color or click on the already selected color and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
.gif?alt=media&token=c7c36dd5-49d9-4c95-96e9-49492ebd0a46)
On running the app, the customized selected chip looks like this:
.gif?alt=media&token=a559ae2b-671c-4124-8fe3-39ff630c7afe)
Last modified 1mo ago