➡️ Instructions
To start using the plugin, follow the steps described below:

   👉 Create a "Shape" element on your page. You can resize it however you want, imagine that this element is your "Dropdown". Then define an "ID Attribute" for this element.

   👉 With the "Shape" element created, now insert the "Search for dropdown" element into your application. It can be inserted anywhere on your page. But for organizational reasons we suggest that you place this element inside your "Shape" element.

   👉 With the "Search for dropdown" element inserted on your page, it's time to configure your "Dropdown". In the "Search for dropdown" element settings window you will provide the following values:

        ● Element ID: Here you will define the "ID Attribute" value that you defined in your "Shape" element.

        ● Placeholder: Here you will set the placeholder value of your "Dropdown" element

        ● Choices: Here you will define the options that the user will be able to choose in their "Dropdown" element. If you want to set static values, skip a line for each option. If dynamic values, provide a text list for the field.

        ● Default value: Set here the default value that your "Dropdown" element should contain. If the default value is empty, leave the field empty.

        ● Background Color: Set here the background color value of your "Dropdown" element

        ● Allow empty: Set here if your "Dropdown" can be empty or if it cannot be empty.

        ● Show labels: Define here if your "Drodown" should show the orientation labels for the user.

        ● Select label: Define here the message that will appear when the user hovers over an option in your "Dropdown".

        ● Font Color Select label: Define here the font color that will be applied to the option of your "Dropdown" item when the user moves the mouse over the option.

        ● Bg Color Select label: Define here the background color that will be applied to your "Dropdown" item option when the user hovers over the option with the mouse.

        ● Deselect label: Define here the message that will appear when the user hovers over the selected option of your "Dropdown"

        ● Font Color Deselect label: Define here the font color that will be applied to the selected "Dropdown" option when the user moves the mouse over the option.

        ● Bg Color Deselect label: Define here the background color that will be applied to the selected "Dropdown" option when the user hovers over the option with the mouse.

        ● Show no results: Define here whether the label of results not found according to the user's search should be displayed or not.

        ● No results (Label): Define here the message that should appear to the user if no option is found according to your search.

        ● Max height: Set here the maximum height that the option field can reach.

        ● Selected label: Define here the message that will appear to the user when an option is selected in its "Dropdown"

        ● Font Color Selected label: Set here the font color of the option selected in your "Dropdown"

        ● Bg Color Selected label: Set here the background color of the selected option in your "Dropdown"

   👉 Set the font color, font family and font size normally in the style of the "Search for dropdown" element.

   👉 Ready! Your plugin is already configured.

➡️ States

In order to retrieve the value chosen by the user, you will search for the name of your element "Search for dropdown" and access the state "Value". You can also check if your "Dropdown" element is open or not by accessing the "isOpen" state