🚀 How to Use
1. Add the element
Drop the Selectable List element into your Bubble mobile page.

2. Configure the options
Set the options field to a list of texts (e.g. ["Apple", "Banana", "Cherry"]).

3. Choose select mode
Toggle multiSelect (yes/no) depending on whether users can select more than one option.

4. Customize styles
Use plugin props to control:

Padding (paddingTop, paddingLeft, etc.)

Border styling (borderColor, borderWidth, borderRadius)

Background (backgroundColor, selectedBackgroundColor)

Font colors (fontColor, selectedFontColor)

5. Access selected values
Use the following states in your workflow or UI:

selected_indexes → List of numbers (index of selected items)

selected_options → List of texts (selected values)

6. Trigger workflows
Use the selection_changed event to trigger actions whenever the user makes a selection.

🔥 Pro Tips
Bubble’s font settings (size, bold, italic, underline) are supported automatically.

Mobile fonts must be system fonts. Custom fonts from Bubble will work in preview, but will fallback on device.

Use a standard Bubble "Text" element next to the list if you want more elaborate font styling.

Editor: https://bubble.io/page?id=ncv-react-plugins&test_plugin=1744272932911x275934515398180860_current&tab=Design&name=selectable_list&type=page

Demo: https://ncv-react-plugins.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=selectable_list