|
| 1 | +--- |
| 2 | +slug: checkboxgroup |
| 3 | +title: CheckboxGroup |
| 4 | +tags: [] |
| 5 | +description: Learn how to add CheckboxGroup widget in your FlutterFlow app. |
| 6 | +sidebar_position: 3 |
| 7 | +--- |
| 8 | + |
| 9 | + |
| 10 | +# CheckboxGroup |
| 11 | + |
| 12 | +The CheckboxGroup widget is used to allow a user to select multiple items. The checkbox is displayed before the item name, which you can check/uncheck to make/remove the selection. |
| 13 | + |
| 14 | +You can use the CheckboxGroup widget for implementing multiple selections such as repeating days for alarm, languages a user can speak, and allowing users to select pizza toppings. |
| 15 | + |
| 16 | +## Adding CheckboxGroup |
| 17 | + |
| 18 | +Here's an example of how you can use the CheckboxGroup widget in your project: |
| 19 | + |
| 20 | +1. First, add the **CheckboxGroup** widget from the **Form Elements** tab or add it directly from the widget tree. |
| 21 | +2. By default, the CheckboxGroup 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**. |
| 22 | +3. To add more options, move to the properties panel, and scroll down to the **Define Options** section. |
| 23 | + 1. Click on the **Add Option** text. |
| 24 | + 2. Enter the name in **Option 2 Text**. |
| 25 | +4. To remove the option, click on the cancel icon displayed in the **Option name** property. |
| 26 | +5. Click on the **Set from Variable** to show the options from a variable such as app state variable, API response variable, or Firestore Document. |
| 27 | + |
| 28 | + |
| 29 | + |
| 30 | +## Setting initial selection |
| 31 | + |
| 32 | +Sometimes you might want to display the CheckboxGroup with some options already selected. For example, selecting the topping options that are already served with Pizza itself. You can do so by setting the initial selection for the CheckboxGroup. |
| 33 | + |
| 34 | +To set initial selection manually: |
| 35 | + |
| 36 | +1. Select the **CheckboxGroup** from the widget tree or the canvas area. |
| 37 | +2. Move to the properties panel (on the right side of your screen) and scroll down to the **Initially Selected** section. |
| 38 | +3. Click on the **Add Selected** and enter the option name that you would like to display as selected. **Note**: Make sure you enter the correct name and it matches with the option name added inside the define options section. |
| 39 | +4. Similarly, you can display the other option(s) as selected. |
| 40 | + |
| 41 | + |
| 42 | + |
| 43 | + |
| 44 | +## Clear/Select all items [Action] |
| 45 | +You might want to allow users to clear or select all items in one go. You can do so by adding the following action. |
| 46 | + |
| 47 | + |
| 48 | + |
| 49 | +Follow the steps below to add this action to any widget. |
| 50 | + |
| 51 | +1. Select the **Widget** (e.g., Button) on which you want to add the action. |
| 52 | +2. Select **Actions** from the properties panel (the right menu), If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**. |
| 53 | +3. Search and select the **Clear All/Select All** (under *Widget/UI Interactions*) action. |
| 54 | +4. **Choose Multiselect Widget** name from the dropdown. |
| 55 | +5. Finally, set the **Action Type** to **Clear All** or **Select All**. |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +## Customization |
| 60 | + |
| 61 | +You can use the Properties Panel to customize the appearance of your widget. |
| 62 | + |
| 63 | +### Set padding around the checkbox |
| 64 | + |
| 65 | +To create empty space around the checkbox: |
| 66 | + |
| 67 | +1. Select the **CheckboxGroup** from the widget tree or the canvas area. |
| 68 | +2. Move to the properties panel and find the **Item Padding** property. |
| 69 | +3. Set the padding for the L(Left), T(Top), R(Right), and B(Bottom) sides. Use the Lock button to change all values at the same time. Unlocking will allow you to modify each value separately. |
| 70 | + |
| 71 | + |
| 72 | + |
| 73 | +### Changing checkbox color |
| 74 | + |
| 75 | +To change the checkbox color: |
| 76 | + |
| 77 | +1. Select the **CheckboxGroup** from the widget tree or the canvas area. |
| 78 | +2. Move to the properties panel and scroll down to the **Checkbox Style** section. |
| 79 | +3. To change the active color (i.e. color when the checkbox is selected), find the **Active Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button. |
| 80 | +4. the Similarly you can change the check color (i.e color of the done/tickmark icon inside the checkbox). |
| 81 | + |
| 82 | + |
| 83 | + |
| 84 | +### Customizing checkbox borde |
| 85 | + |
| 86 | +To customize the checkbox border: |
| 87 | + |
| 88 | +1. Select the **CheckboxGroup** from the widget tree or the canvas area. |
| 89 | +2. Move to the properties panel and scroll down to the **Checkbox Style** section. |
| 90 | +3. To change the checkbox border color, find the **Check Border Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button. |
| 91 | +4. To adjust the border corner, find the **Border Radius** property and enter the values in the TL (Top left), TR (top right), BL (bottom left), and BR (bottom right) boxes. Use the Lock button to change all values at the same time. Unlocking will allow you to modify each value separately. |
| 92 | + |
| 93 | + |
| 94 | + |
| 95 | +## Trigger action on change |
| 96 | + |
| 97 | +See how to [trigger an action when a selection changes](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget. |
0 commit comments