Links

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.

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

Show/Hide ChoiceChips

Please find the instructions to show/hide the widget here