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
Adding a ChoiceChips to Your Project
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.
Changing Name and Icon
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.
Adding or Removing Option
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.
​
Clear/Select all items
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.
Before you add this action, ensure you allow multiselect on this widget.
Clear All/Select All
Customizing
The Properties Panel can be used to customize the appearance and behavior of your widget.
Add Padding
​Here are the instructions on how to add padding.
Adjust the Alignment
​Here are the instructions on adjusting the alignment.
Changing the Default Selection
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.
Allow mulitselect
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
Adding Space between Chips
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.
Customizing Selected Chip
Various properties under the Selected Chip Style section allow you to customize the selected chip to match your design.
Changing Background Color
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.
Customizing Icon
To customize the icon, select ChoiceChips > move to the Properties Panel > Selected Chip Style > change Icon Color and Size.
Changing Elevation
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.
Add Label Padding
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.
Changing Text Style
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.
Customizing Unselected Chip
Various properties under the Unselected Chip Style section allow you to customize the unselected chip to match your design.
Changing Background Color
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.
Customizing Icon
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.
Changing Elevation
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.
Add Label Padding
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.
Changing Text Style
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.
On running the app, the customized selected chip looks like this:
Set color dynamically
See how to set a color from variable to any color property of this widget.
Trigger action on change
See how to trigger an action when a selection changes on this widget.
Show/Hide ChoiceChips
Please find the instructions to show/hide the widget here​
CountController
PlacePicker
Last modified 1mo ago