# Advanced Form Inputs Group

## Overview

This fully-responsive block includes custom inputs such as multi-select checkboxes, multi-file and multi-image uploaders.

## Structure

The block includes the following:

* Various bubble input elements (input, multi-line input, dropdown, date/time input, radio buttons, search box, and multi-dropdown)
* Four custom inputs:
  * **Group Inner multi-select options**
    * **RepeatingGroup Options** displays a list of options (set to dummy data for now)
  * **Group Inner single checkbox\_yes / no**
  * **Multi-file uploader** (reusable)
  * **Multi-image uploader** (reusable)

## How to set up

* Update the data source for all standard Bubble inputs
* Update the data source for **RepeatingGroup Options** and its associated workflows
  * Clicking on **Group Main select option** will add the current option to a list of `selected options` on **RepeatingGroup Options**
  * **RepeatingGroup Options** has a custom state `selected options` of type `Dummy`. Modify the custom state's type.
* Update **Text Click to check this**
  \*
  * **Group Inner single checkbox\_yes / no** has a `yes/no` data type. Clicking on the group will display "yes" in the group (check the box) or "no" in the group (uncheck the box)
* Add workflows to **Button Add** and **Button Save changes**

## How to set up the custom multi-file uploader

* **Multi-file uploader** reusable element contains the following:
  * **Multi-file uploader** has a custom state of `list of files (type: file)`
* **HTML multiuploader style** includes a code snippet that changes 

  **Multi-FileUploader files's** color. You can modify the color by updating the HEX codes.
* Upload files (videos, images, and documents) with **Multi-FileUploader files**
* **RepeatingGroup uploaded files** displays **Multi-FileUploader's** list of files 
* Clicking on **Group Main delete file** deletes a file
* **Group Inner image\_file** contains an image with link preview, a document icon, and a video icon
* If needed, modify the conditional statement on **Image file preview** and add any additional file extension you might want to include. The default file extensions include:
  * .jpg
  * .jpeg
  * .png
  * .svg
  * .gif
* If needed, modify the conditional statement on **Feathericon doc** and add any additional final extension you might want to include. The default file extensions include:
  * .doc
  * .docx
  * .pdf
  * .xls
  * .xlsx
  * .csv
  * .ppt
  * .pptx
* If needed, modify the conditional statement on **Feathericon video** and add any additional final extension you might want to include. The default file extensions include:
  * .mp4
  * .m4a
  * .wmv
  * .mov

## How to set up the custom multi-image uploader

* **Multi-image uploader** reusable element contains the following:
  * **Multi-image uploader** has a custom state of list of `files images (type: file)` and `selected file image (type: file)`
* **HTML multiuploader style** includes a code snippet that changes 

  **Multi-FileUploader images upload's color**. You can modify the color by updating the HEX codes.
* Upload images with **Multi-FileUploader images upload**
* **RepeatingGroup uploaded images's** displays **Multi-image uploader's** list of `files images`
* Clicking on **Group Inner delete image** deletes a file image
* Add workflows to **Group Inner move left** and **Group Inner move right**. These groups should be used when you want to edit the order of a list of file images.
* Clicking on **Group Inner select image\_file** will update **RepeatingGroup uploaded images's** `selected file image`. This should be used when you want to select a main image from a list of images (e.g., cover photo, profile picture, or main listing image).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas/canvas-library/blocks/advanced-form-inputs-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.