Enhance Your Forms with Customizable Multiselect Dropdowns

Have you ever needed to create a customizable dropdown in Digioh that allows users to select multiple options and format their selections with style? Now, with App #597 – Stylable Multiselect Dropdown, you can easily implement a dynamic, multi-select dropdown that lets users pick multiple options, and you can display their choices in a format that suits your design preferences.

What Does This App Solve?

This app solves the issue of basic dropdown limitations. It enables users to select multiple items from a dropdown and dynamically display their selected options as styled buttons. This gives you the freedom to create a more interactive and visually appealing selection experience for your users.

How to Use App #597 – Stylable Multiselect Dropdown

1. Add the Dropdown:
   • Start by adding a regular dropdown to your form.
   • Make sure you add the metadata multiselect to the dropdown element. The value of this metadata will be used to match with the buttons that will display the selected options.
2. Add a single Button for Displaying Selections:
   • Create a button to display the selected options. You only need to create one. Style it as needed, this design will be used to show the selected options. Also place it where you need the selected values to be shown.
   • Attach the metadata multiselect_selections to this button, with the same value used in the multiselect metadata. This matching ensures that the selected options are displayed using this button.
   • The selected options will be shown as individual buttons, and users can click on these buttons to remove a selection.

Customize Styles

To add further customization over the dropdown, you can use these metadata fields:

• multiselect_hover_bg: Define the background color when hovering over options.
• multiselect_hover_color: Set the text color when hovering over options.
• multiselect_selected_bg: Specify the background color for selected options.
• multiselect_selected_color: Customize the text color for selected options.

Example:

Let’s say you have a form where users need to select their favorite activities. The dropdown for selecting activities would have the multiselect metadata, and the button to display the chosen activities would have the multiselect_selections metadata, both set to the same value like activities_selection. You could further customize the hover and selected styles using the other metadata keys.

With App #597, you’re not just adding a multi-select dropdown—you’re adding a fully customizable, dynamic, and visually appealing user experience.

If you need further assistance, feel free to contact us at support@digioh.com!