☑️Checkboxes (Multiple select)

This feature allows you to create multiple-select option input component within a form.

👉 The tags

To achieve this, you need to set up each group to the same form value variable in the binding (so it’s send as a unique variable) and there are several tags need to be configured for proper functionality:

1. 
[input-state-set]: Defines the setup of a component with an input and states.

2. [input-group:<multiple>:{identifier-name}] Defines the multiple functionality of the radio buttons, all groups need to have the same identifier name.

3. [input-value:{value}]: This tag sets the value of the element that will be send if active when form submits. It is optional as this can be set using binding or static binding.

4. 

[state:default] and [state:active] sets the different states for the elements.

🏷️ How to add the tag

In this example, we've created an input group featuring three options: Cats, Dogs, and Birds. The input group functions as a multiple-select checkboxes.

1. Create stateful components by designing both the active [state:active] and default [state:default] states for each checkbox. Additionally, you can use the pressed state [state:pressed].

2. Ensure these components are appropriately grouped for each option. In this example, we have three groups: Select Cats, Select Dogs and Select Birds .

3. Add the tag [input-state-set] to each group. Also add the tag [input-group:multiple:{identifier-name}] to add the multiple-select functionality. All groups must have the same {identifier-name} . In our example, the identifier name is green.

4. Optionally, you can incorporate the tag [input-value:{value}] to the active state to set the value that you want to save to your backend. In our example, the value is cats for the Select Cats group.

5. Repeat the same steps with the other existing options.

6. Make sure there is a submit button with the [action:submit] tag to submit the form.

🔌 Binding with the API

For this example we'll be using Xano as our backend. In our database, we have a user table with a simple text field called pets which we want to connect to our multiple-select option input checkbox component.

You should have completed setting up the API POST or PATCH request in order to bind data. See here how to Set up an API POST request.

POST API request in Bravo

As you'll see in the image above, we're using a unique variable ${pets} for the three pets options : Cats, Dogs and Birds.

Binding section

In this example, we're going to bind the group component "Select Cats". To bind:

1. On the left side of the screen, under "Elements," select the group element representing the checkbox. Alternatively, you can choose the element directly from the image in the middle of the screen.

2. On the right-hand side, under "Form Data," connect the form input to the request variable. To achieve this, choose your data collection, the POST request, and finally, the variable named pets.

3. Repeat Step 1 and Step 2 for the remaining available options.

💾 Example File

Bravo sample: Radio buttons & Multiple selection | Figma CommunityFigma

If you're looking for a single-select component, refer to the guide below:

🔘pageRadio buttons (Single select)