The ChoiceChips widget allows users to select a single option from a group of chips. Each chip is presented with an icon and accompanying text, making it easy to represent various choices.
You could use this widget to implement a filter feature in an e-commerce app to let users select different product attributes like size, color, or price range.
To add the ChoiceChips widget to your app:
- 2.By default, this widget adds a single option named Option 1. To change the name, move to the Properties Panel (on the right side of your screen), and scroll down to the Define Options section. Find the Option 1 property and change the name and icon.
- 3.To add more options, click on the Add Option text and set the name and icon for new options.
- 4.To set any chip as selected by default, find the Initial Option property and enter the chip name.
Adding ChoiceChips widget
Users may need to swiftly deselect all chips or choose all available choice chips at once. You can do so by adding the following action.
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.
Sometimes, you may want to present the choices in a read-only mode, preventing users from making any changes.
To add a space between the chips, you can use the Chip Spacing ad Row Spacing property.
- Chip Spacing: This adds horizontal gaps between individual chips.
- Row Spacing: This adds vertical gaps between the chips in a row.
Adding Space between Chips
Various properties under the Selected Chip Style and Unselected Chip Style section allow you to customize chips to match your design. Here's how you do it:
- 1.To change the background color, use the Color property.
- 2.To change the icon's color and size, use the Icon Color and Icon Size property.
- 3.To add a shadow or to create a sense of depth for the chip, you can use the Elevation property.
- 4.To customize the border, use the Border Color, Border Width (thickness), and Border Radius (rounded corner) properties.
- 5.To create some space around the label, use the Label Padding property.
Customizing selected chip style
- 7.Similarly, you can customize the properties under the Unselected Chip Style.
Customizing unselected chip style