npm - @rio-cloud/uikit-mcp - Versions diffs - 1.0.0 - Mend

@rio-cloud/uikit-mcp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/data/pages/Components/components/selects.json ADDED Viewed

@@ -0,0 +1,701 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:25.908Z",
+    "source": "https://uikit.developers.rio.cloud/#components/selects",
+    "category": "Components",
+    "section": "Selection",
+    "slug": "components/selects",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "7ee88ef43c34f9cadba7b1cd181a9f397088d232a0c17d28784e390f16ce0994"
+  },
+  "title": "Select",
+  "lead": "The Select and Multiselect components are form controls and are intended to be used within forms. They are designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
+  "content": [
+    {
+      "heading": "Select",
+      "body": "This component allows the selection of a single element from provided list.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"row\"><div class=\"col-12 col-sm-4 form-group\"><label for=\"1\">Notification callback</label><div class=\"select dropdown test-className\"><button type=\"button\" id=\"1\" class=\"dropdown-toggle form-control text-left test-btnClassName\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"placeholder\">Please select</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu test-dropdownClassName max-width-100pct\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\"><span class=\"selected-option-dropdown-item\">Option 7</span><input type=\"hidden\" value=\"7\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">Option 9</span><input type=\"hidden\" value=\"9\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">Option 10</span><input type=\"hidden\" value=\"10\"></a></li></ul></div></div><div class=\"col-12 col-sm-4 form-group\"><label for=\"2\">with pre-selected item</label><div class=\"select dropdown\"><button type=\"button\" id=\"2\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"col-xs-12 col-sm-4 form-group\"><label for=\"3\">with disabled item and group header</label><div class=\"select dropdown\"><button type=\"button\" id=\"3\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"placeholder\">Please select</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"disabled\" role=\"listitem\"><a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"dropdown-header center \"><span class=\"dropdown-header-text\">Header</span></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div></div><div class=\"row\"><div class=\"col-12 col-sm-4 form-group\"><label for=\"4\">with filter</label><div class=\"select dropdown\"><button type=\"button\" id=\"4\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span>Truck</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span>Truck</span></span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span>Van</span></span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span>Bus</span></span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"col-12 col-sm-4 form-group\"><label for=\"5\">with label</label><div class=\"select dropdown\"><button type=\"button\" id=\"5\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"selected-option-text-label\">Vehicle:</span><span>Truck</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span>Truck</span></span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span>Van</span></span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span>Bus</span></span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"col-xs-12 col-sm-4 form-group\"><label for=\"6\">with input</label><div class=\"input-group\"><div class=\"input-group-btn\"><div class=\"select dropdown\"><button type=\"button\" id=\"6\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><input class=\"form-control margin-left--1\" value=\"12345-6789\"></div></div><div class=\"col-12 col-sm-4 form-group\"><label for=\"7\">with clear button</label><div class=\"select dropdown\"><button type=\"button\" id=\"7\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"col-12 col-sm-4 form-group\"><label for=\"8\">with \"dropup\"</label><div class=\"select dropdown dropup\"><button type=\"button\" id=\"8\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"col-12 col-sm-4 form-group\"><label for=\"9\">Disabled</label><div class=\"select dropdown\"><button type=\"button\" id=\"9\" class=\"dropdown-toggle form-control text-left disabled\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"placeholder\">Please select</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button></div></div><div class=\"col-12 col-sm-4 form-group\"><label for=\"20\">With icon rendered in an inputAddon</label><div class=\"select dropdown dropup\"><div class=\"form-group margin-bottom-0\"><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-load\"></span></div><div class=\"form-control-feedback-wrapper\"><button type=\"button\" id=\"20\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"placeholder\">Please select</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button></div></div></div><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\"><span class=\"selected-option-dropdown-item\">Option 7</span><input type=\"hidden\" value=\"7\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">Option 9</span><input type=\"hidden\" value=\"9\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">Option 10</span><input type=\"hidden\" value=\"10\"></a></li></ul></div></div></div><hr><div class=\"row\"><div class=\"col-12 col-sm-4 form-group\"><label for=\"10\">with truncated label</label><div class=\"select dropdown dropup\"><button type=\"button\" id=\"10\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Select with a very long label to demonstrate truncating inner text with ellipsis</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Select with a very long label to demonstrate truncating inner text with ellipsis</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Label 1</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Label 2</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"col-12 col-sm-8 display-flex flex-wrap justify-content-end gap-10\"><div><label for=\"11\">with \"pullRight\" on small selects</label><div class=\"display-flex gap-10 align-items-end\"><div class=\"form-group\"><div class=\"select dropdown\"><button type=\"button\" id=\"11\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 1</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu pull-right\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3 with a very long label for demonstration</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"form-group\"><div class=\"select dropdown dropup\"><button type=\"button\" id=\"12\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 1</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu pull-right\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3 with a very long label for demonstration</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div></div></div><div><label for=\"13\">with \"pullRight\" and \"width-auto\"</label><div class=\"form-group\"><div class=\"select dropdown\"><button type=\"button\" id=\"13\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 1</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu pull-right width-auto\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3 with a very long label for demonstration</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div></div></div></div><hr><div class=\"form-group\"><label for=\"14\">with custom sizes</label><div class=\"display-flex gap-10 align-items-end\"><div class=\"form-group\"><div class=\"select dropdown dropup\"><button type=\"button\" id=\"14\" class=\"dropdown-toggle form-control text-left input-lg\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span></span>Option 1</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span>Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span>Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span>Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span>Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div><div class=\"form-group\"><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span></span>Option 1</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span>Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span>Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span>Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span>Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div><div class=\"form-group\"><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left input-sm\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span></span>Option 1</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span>Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span>Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span>Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span>Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div></div></div><hr><div class=\"form-group has-error has-feedback max-width-400\"><label for=\"15\">with external error feedback</label><div class=\"select dropdown has-error dropup\"><button type=\"button\" id=\"15\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span><span class=\"help-block\"><span>This is an error message</span></span></div><hr><div class=\"max-width-400\"><label for=\"18\">with built-in error feedback</label><div class=\"select dropdown dropup\"><div class=\"form-group margin-bottom-0 has-feedback has-error\"><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-robot\"></span></div><div class=\"form-control-feedback-wrapper\"><button type=\"button\" id=\"18\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span><span class=\"help-block white-space-normal\"><span>This is an error message</span></span></div></div></div><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><hr><div class=\"form-group\"><label for=\"16\">with custom button classes</label><div class=\"form-inline\"><div class=\"form-group\"><div class=\"select dropdown shadow-none dropup\"><button type=\"button\" id=\"16\" class=\"dropdown-toggle form-control text-left btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none input-lg\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"form-group\"><div class=\"select dropdown shadow-none dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"form-group\"><div class=\"select dropdown shadow-none dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none input-sm\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Option 3</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div></div></div><hr><div class=\"form-group\"><label for=\"17\">with icons only</label><div class=\"form-inline\"><div class=\"form-group\"><div class=\"select dropdown dropup\"><button type=\"button\" id=\"17\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span></span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span>Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span>Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span>Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span>Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div><div class=\"form-group\"><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span></span><span class=\"inactiveIcon\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span></span><span class=\"inactiveIcon\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span></span><span class=\"inactiveIcon\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span></span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span>Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span>Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span>Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span>Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div></div></div><div class=\"form-group\"><label for=\"18\">with loading spinner</label><div class=\"form-inline\"><div class=\"form-group\"><div class=\"select dropdown dropup\"><button type=\"button\" id=\"18\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"placeholder\">Please select</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><div class=\"display-flex justify-content-center padding-10\"><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div></div></div></ul></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Select from '@rio-cloud/rio-uikit/Select';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nconst options1 = [\n    { id: '1', label: 'Option 1' },\n    { id: '2', label: 'Option 2' },\n    { id: '3', label: 'Option 3' },\n    { id: '4', label: 'Option 4' },\n    { id: '5', label: 'Option 5' },\n    { id: '6', label: 'Option 6' },\n    { id: '7', label: 'Option 7' },\n    { id: '8', label: 'Option 8' },\n    { id: '9', label: 'Option 9' },\n    { id: '10', label: 'Option 10' },\n];\n\nconst options2 = [\n    { id: '1', label: 'Option 1' },\n    { id: '2', label: 'Option 2' },\n    { id: '3', label: 'Option 3', selected: true },\n];\n\nconst options3 = [\n    { id: '1', label: 'Option 1' },\n    { id: '2', label: 'Option 2', disabled: true },\n    { id: '3', label: 'Header', header: true },\n    { id: '4', label: 'Option 4' },\n];\n\nconst options4 = [\n    {\n        id: '1',\n        label: <span>Truck</span>,\n        selected: true,\n    },\n    {\n        id: '2',\n        label: <span>Van</span>,\n        selected: false,\n    },\n    {\n        id: '3',\n        label: <span>Bus</span>,\n        selected: false,\n    },\n];\n\nconst options5 = [\n    {\n        id: '1',\n        label: 'Option 1',\n        icon: <span className='rioglyph rioglyph-status-available text-color-status-available' />,\n        selected: true,\n    },\n    {\n        id: '2',\n        label: 'Option 2',\n        icon: <span className='rioglyph rioglyph-status-driving text-color-status-driving' />,\n    },\n    {\n        id: '3',\n        label: 'Option 3',\n        icon: <span className='rioglyph rioglyph-status-resting text-color-status-resting' />,\n    },\n    {\n        id: '4',\n        label: 'Option 4',\n        icon: <span className='rioglyph rioglyph-status-working text-color-status-working' />,\n    },\n];\n\nconst options6 = [\n    { id: '1', label: 'Option 1', selected: true },\n    { id: '2', label: 'Option 2' },\n    { id: '3', label: 'Option 3 with a very long label for demonstration' },\n];\n\nconst options7 = [\n    {\n        id: '1',\n        label: 'Select with a very long label to demonstrate truncating inner text with ellipsis',\n        selected: true,\n        foo: 'bar',\n    },\n    {\n        id: '2',\n        label: 'Label 1',\n        selected: false,\n        foo: 'bar',\n    },\n    {\n        id: '3',\n        label: 'Label 2',\n        selected: false,\n        foo: 'bar',\n    },\n];\n\nexport default () => (\n    <div>\n        <div className='row'>\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='1'>Notification callback</label>\n                <Select\n                    id='1'\n                    placeholder='Please select'\n                    options={options1}\n                    onChange={item => Notification.info(item?.label)}\n                    className='test-className'\n                    btnClassName='test-btnClassName'\n                    dropdownClassName='test-dropdownClassName max-width-100pct'\n                />\n            </div>\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='2'>with pre-selected item</label>\n                <Select id='2' options={options2} onChange={item => Notification.info(item?.label)} />\n            </div>\n            <div className='col-xs-12 col-sm-4 form-group'>\n                <label htmlFor='3'>with disabled item and group header</label>\n                <Select id='3' placeholder='Please select' options={options3} />\n            </div>\n        </div>\n\n        <div className='row'>\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='4'>with filter</label>\n                <Select id='4' placeholder='Please select' options={options4} useFilter noItemMessage='Nothing found' />\n            </div>\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='5'>with label</label>\n                <Select id='5' placeholder='Please select' options={options4} label='Vehicle' />\n            </div>\n            <div className='col-xs-12 col-sm-4 form-group'>\n                <label htmlFor='6'>with input</label>\n                <div className='input-group'>\n                    <div className='input-group-btn'>\n                        <Select id='6' options={options2} />\n                    </div>\n                    <input className='form-control margin-left--1' defaultValue='12345-6789' />\n                </div>\n            </div>\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='7'>with clear button</label>\n                <Select\n                    id='7'\n                    placeholder='Please select'\n                    options={options2}\n                    onChange={item => Notification.info(item ? item.label : 'cleared')}\n                    useClear\n                />\n            </div>\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='8'>with \"dropup\"</label>\n                <Select id='8' placeholder='Please select' options={options2} dropup />\n            </div>\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='9'>Disabled</label>\n                <Select id='9' placeholder='Please select' disabled options={[]} />\n            </div>\n\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='20'>With icon rendered in an inputAddon</label>\n                <Select\n                    id='20'\n                    placeholder='Please select'\n                    inputAddon='rioglyph rioglyph-load'\n                    options={options1}\n                    useFilter\n                />\n            </div>\n        </div>\n        <hr />\n\n        <div className='row'>\n            <div className='col-12 col-sm-4 form-group'>\n                <label htmlFor='10'>with truncated label</label>\n                <Select id='10' placeholder='Please select' options={options7} />\n            </div>\n            <div className='col-12 col-sm-8 display-flex flex-wrap justify-content-end gap-10'>\n                <div>\n                    <label htmlFor='11'>with \"pullRight\" on small selects</label>\n                    <div className='display-flex gap-10 align-items-end'>\n                        <div className='form-group'>\n                            <Select id='11' placeholder='Please select' options={options6} pullRight />\n                        </div>\n                        <div className='form-group'>\n                            <Select id='12' placeholder='Please select' options={options6} dropup pullRight />\n                        </div>\n                    </div>\n                </div>\n                <div>\n                    <label htmlFor='13'>with \"pullRight\" and \"width-auto\"</label>\n                    <div className='form-group'>\n                        <Select\n                            id='13'\n                            placeholder='Please select'\n                            options={options6}\n                            pullRight\n                            dropdownClassName='width-auto'\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n        <hr />\n\n        <div className='form-group'>\n            <label htmlFor='14'>with custom sizes</label>\n            <div className='display-flex gap-10 align-items-end'>\n                <div className='form-group'>\n                    <Select id='14' bsSize='lg' options={options5} />\n                </div>\n                <div className='form-group'>\n                    <Select options={options5} />\n                </div>\n                <div className='form-group'>\n                    <Select bsSize='sm' options={options5} />\n                </div>\n            </div>\n        </div>\n        <hr />\n\n        <div className='form-group has-error has-feedback max-width-400'>\n            <label htmlFor='15'>with external error feedback</label>\n            <Select id='15' options={options2} hasError />\n            <span className='form-control-feedback rioglyph rioglyph-error-sign' />\n            <span className='help-block'>\n                <span>This is an error message</span>\n            </span>\n        </div>\n        <hr />\n\n        <div className='max-width-400'>\n            <label htmlFor='18'>with built-in error feedback</label>\n            <Select\n                id='18'\n                options={options2}\n                inputAddon='rioglyph rioglyph-robot'\n                errorMessage='This is an error message'\n            />\n        </div>\n        <hr />\n\n        <div className='form-group'>\n            <label htmlFor='16'>with custom button classes</label>\n            <div className='form-inline'>\n                <div className='form-group'>\n                    <Select\n                        id='16'\n                        bsSize='lg'\n                        options={options2}\n                        className='shadow-none'\n                        btnClassName='btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none'\n                    />\n                </div>\n                <div className='form-group'>\n                    <Select\n                        options={options2}\n                        className='shadow-none'\n                        btnClassName='btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none'\n                    />\n                </div>\n                <div className='form-group'>\n                    <Select\n                        bsSize='sm'\n                        options={options2}\n                        className='shadow-none'\n                        btnClassName='btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none'\n                    />\n                </div>\n            </div>\n        </div>\n        <hr />\n\n        <div className='form-group'>\n            <label htmlFor='17'>with icons only</label>\n            <div className='form-inline'>\n                <div className='form-group'>\n                    <Select id='17' options={options5} placeholder='Please select' showSelectedItemIcon />\n                </div>\n                <div className='form-group'>\n                    <Select options={options5} showSelectedItemIcon showUnselectedItemIcons />\n                </div>\n            </div>\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='18'>with loading spinner</label>\n            <div className='form-inline'>\n                <div className='form-group'>\n                    <Select id='18' options={options1} placeholder='Please select' isLoading />\n                </div>\n            </div>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"row\">\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"1\">Notification callback</label>\n            <div class=\"select dropdown test-className\">\n                <button type=\"button\" id=\"1\" class=\"dropdown-toggle form-control text-left test-btnClassName\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">\n                        <span class=\"placeholder\">Please select</span>\n                    </span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu test-dropdownClassName max-width-100pct\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">Option 1</span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">Option 2</span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">Option 3</span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                            <span class=\"selected-option-dropdown-item\">Option 4</span>\n                            <input type=\"hidden\" value=\"4\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n                            <span class=\"selected-option-dropdown-item\">Option 5</span>\n                            <input type=\"hidden\" value=\"5\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n                            <span class=\"selected-option-dropdown-item\">Option 6</span>\n                            <input type=\"hidden\" value=\"6\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\">\n                            <span class=\"selected-option-dropdown-item\">Option 7</span>\n                            <input type=\"hidden\" value=\"7\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n                            <span class=\"selected-option-dropdown-item\">Option 8</span>\n                            <input type=\"hidden\" value=\"8\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n                            <span class=\"selected-option-dropdown-item\">Option 9</span>\n                            <input type=\"hidden\" value=\"9\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\">\n                            <span class=\"selected-option-dropdown-item\">Option 10</span>\n                            <input type=\"hidden\" value=\"10\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"2\">with pre-selected item</label>\n            <div class=\"select dropdown\">\n                <button type=\"button\" id=\"2\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">Option 3</span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">Option 1</span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">Option 2</span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">Option 3</span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"col-xs-12 col-sm-4 form-group\">\n            <label for=\"3\">with disabled item and group header</label>\n            <div class=\"select dropdown\">\n                <button type=\"button\" id=\"3\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">\n                        <span class=\"placeholder\">Please select</span>\n                    </span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">Option 1</span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"disabled\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">Option 2</span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"dropdown-header center \">\n                        <span class=\"dropdown-header-text\">Header</span>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                            <span class=\"selected-option-dropdown-item\">Option 4</span>\n                            <input type=\"hidden\" value=\"4\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"4\">with filter</label>\n            <div class=\"select dropdown\">\n                <button type=\"button\" id=\"4\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">\n                        <span>Truck</span>\n                    </span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">\n                                <span>Truck</span>\n                            </span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">\n                                <span>Van</span>\n                            </span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">\n                                <span>Bus</span>\n                            </span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"5\">with label</label>\n            <div class=\"select dropdown\">\n                <button type=\"button\" id=\"5\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">\n                        <span class=\"selected-option-text-label\">Vehicle:</span>\n                        <span>Truck</span>\n                    </span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">\n                                <span>Truck</span>\n                            </span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">\n                                <span>Van</span>\n                            </span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">\n                                <span>Bus</span>\n                            </span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"col-xs-12 col-sm-4 form-group\">\n            <label for=\"6\">with input</label>\n            <div class=\"input-group\">\n                <div class=\"input-group-btn\">\n                    <div class=\"select dropdown\">\n                        <button type=\"button\" id=\"6\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                            <span class=\"selected-option-text\">Option 3</span>\n                            <span class=\"clearButton hide pointer-events-none\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                            <span class=\"caret\">\n                            </span>\n                        </button>\n                        <ul class=\"dropdown-menu\" role=\"menu\">\n                            <li class=\"\" role=\"listitem\">\n                                <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                    <span class=\"selected-option-dropdown-item\">Option 1</span>\n                                    <input type=\"hidden\" value=\"1\">\n                                </a>\n                            </li>\n                            <li class=\"\" role=\"listitem\">\n                                <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                    <span class=\"selected-option-dropdown-item\">Option 2</span>\n                                    <input type=\"hidden\" value=\"2\">\n                                </a>\n                            </li>\n                            <li class=\"\" role=\"listitem\">\n                                <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                    <span class=\"selected-option-dropdown-item\">Option 3</span>\n                                    <input type=\"hidden\" value=\"3\">\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n                <input class=\"form-control margin-left--1\" value=\"12345-6789\">\n            </div>\n        </div>\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"7\">with clear button</label>\n            <div class=\"select dropdown\">\n                <button type=\"button\" id=\"7\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">Option 3</span>\n                    <span class=\"clearButton\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">Option 1</span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">Option 2</span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">Option 3</span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"8\">with \"dropup\"</label>\n            <div class=\"select dropdown dropup\">\n                <button type=\"button\" id=\"8\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">Option 3</span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">Option 1</span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">Option 2</span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">Option 3</span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"9\">Disabled</label>\n            <div class=\"select dropdown\">\n                <button type=\"button\" id=\"9\" class=\"dropdown-toggle form-control text-left disabled\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">\n                        <span class=\"placeholder\">Please select</span>\n                    </span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"20\">With icon rendered in an inputAddon</label>\n            <div class=\"select dropdown dropup\">\n                <div class=\"form-group margin-bottom-0\">\n                    <div class=\"input-group\">\n                        <div class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-load\">\n                            </span>\n                        </div>\n                        <div class=\"form-control-feedback-wrapper\">\n                            <button type=\"button\" id=\"20\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                <span class=\"selected-option-text\">\n                                    <span class=\"placeholder\">Please select</span>\n                                </span>\n                                <span class=\"clearButton hide pointer-events-none\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                                <span class=\"caret\">\n                                </span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">Option 1</span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">Option 2</span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">Option 3</span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                            <span class=\"selected-option-dropdown-item\">Option 4</span>\n                            <input type=\"hidden\" value=\"4\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n                            <span class=\"selected-option-dropdown-item\">Option 5</span>\n                            <input type=\"hidden\" value=\"5\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n                            <span class=\"selected-option-dropdown-item\">Option 6</span>\n                            <input type=\"hidden\" value=\"6\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\">\n                            <span class=\"selected-option-dropdown-item\">Option 7</span>\n                            <input type=\"hidden\" value=\"7\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n                            <span class=\"selected-option-dropdown-item\">Option 8</span>\n                            <input type=\"hidden\" value=\"8\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n                            <span class=\"selected-option-dropdown-item\">Option 9</span>\n                            <input type=\"hidden\" value=\"9\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\">\n                            <span class=\"selected-option-dropdown-item\">Option 10</span>\n                            <input type=\"hidden\" value=\"10\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n    <hr>\n    <div class=\"row\">\n        <div class=\"col-12 col-sm-4 form-group\">\n            <label for=\"10\">with truncated label</label>\n            <div class=\"select dropdown dropup\">\n                <button type=\"button\" id=\"10\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">Select with a very long label to demonstrate truncating inner text with ellipsis</span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">Select with a very long label to demonstrate truncating inner text with ellipsis</span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">Label 1</span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">Label 2</span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"col-12 col-sm-8 display-flex flex-wrap justify-content-end gap-10\">\n            <div>\n                <label for=\"11\">with \"pullRight\" on small selects</label>\n                <div class=\"display-flex gap-10 align-items-end\">\n                    <div class=\"form-group\">\n                        <div class=\"select dropdown\">\n                            <button type=\"button\" id=\"11\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                <span class=\"selected-option-text\">Option 1</span>\n                                <span class=\"clearButton hide pointer-events-none\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                                <span class=\"caret\">\n                                </span>\n                            </button>\n                            <ul class=\"dropdown-menu pull-right\" role=\"menu\">\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                        <span class=\"selected-option-dropdown-item\">Option 1</span>\n                                        <input type=\"hidden\" value=\"1\">\n                                    </a>\n                                </li>\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                        <span class=\"selected-option-dropdown-item\">Option 2</span>\n                                        <input type=\"hidden\" value=\"2\">\n                                    </a>\n                                </li>\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                        <span class=\"selected-option-dropdown-item\">Option 3 with a very long label for demonstration</span>\n                                        <input type=\"hidden\" value=\"3\">\n                                    </a>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div class=\"select dropdown dropup\">\n                            <button type=\"button\" id=\"12\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                <span class=\"selected-option-text\">Option 1</span>\n                                <span class=\"clearButton hide pointer-events-none\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                                <span class=\"caret\">\n                                </span>\n                            </button>\n                            <ul class=\"dropdown-menu pull-right\" role=\"menu\">\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                        <span class=\"selected-option-dropdown-item\">Option 1</span>\n                                        <input type=\"hidden\" value=\"1\">\n                                    </a>\n                                </li>\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                        <span class=\"selected-option-dropdown-item\">Option 2</span>\n                                        <input type=\"hidden\" value=\"2\">\n                                    </a>\n                                </li>\n                                <li class=\"\" role=\"listitem\">\n                                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                        <span class=\"selected-option-dropdown-item\">Option 3 with a very long label for demonstration</span>\n                                        <input type=\"hidden\" value=\"3\">\n                                    </a>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <label for=\"13\">with \"pullRight\" and \"width-auto\"</label>\n                <div class=\"form-group\">\n                    <div class=\"select dropdown\">\n                        <button type=\"button\" id=\"13\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                            <span class=\"selected-option-text\">Option 1</span>\n                            <span class=\"clearButton hide pointer-events-none\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                            <span class=\"caret\">\n                            </span>\n                        </button>\n                        <ul class=\"dropdown-menu pull-right width-auto\" role=\"menu\">\n                            <li class=\"\" role=\"listitem\">\n                                <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                    <span class=\"selected-option-dropdown-item\">Option 1</span>\n                                    <input type=\"hidden\" value=\"1\">\n                                </a>\n                            </li>\n                            <li class=\"\" role=\"listitem\">\n                                <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                    <span class=\"selected-option-dropdown-item\">Option 2</span>\n                                    <input type=\"hidden\" value=\"2\">\n                                </a>\n                            </li>\n                            <li class=\"\" role=\"listitem\">\n                                <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                    <span class=\"selected-option-dropdown-item\">Option 3 with a very long label for demonstration</span>\n                                    <input type=\"hidden\" value=\"3\">\n                                </a>\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr>\n    <div class=\"form-group\">\n        <label for=\"14\">with custom sizes</label>\n        <div class=\"display-flex gap-10 align-items-end\">\n            <div class=\"form-group\">\n                <div class=\"select dropdown dropup\">\n                    <button type=\"button\" id=\"14\" class=\"dropdown-toggle form-control text-left input-lg\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">\n                            <span>\n                                <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                </span>\n                            </span>Option 1</span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                    </span>Option 1</span>\n                                <input type=\"hidden\" value=\"1\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n                                    </span>Option 2</span>\n                                <input type=\"hidden\" value=\"2\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n                                    </span>Option 3</span>\n                                <input type=\"hidden\" value=\"3\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n                                    </span>Option 4</span>\n                                <input type=\"hidden\" value=\"4\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <div class=\"select dropdown dropup\">\n                    <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">\n                            <span>\n                                <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                </span>\n                            </span>Option 1</span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                    </span>Option 1</span>\n                                <input type=\"hidden\" value=\"1\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n                                    </span>Option 2</span>\n                                <input type=\"hidden\" value=\"2\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n                                    </span>Option 3</span>\n                                <input type=\"hidden\" value=\"3\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n                                    </span>Option 4</span>\n                                <input type=\"hidden\" value=\"4\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <div class=\"select dropdown dropup\">\n                    <button type=\"button\" class=\"dropdown-toggle form-control text-left input-sm\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">\n                            <span>\n                                <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                </span>\n                            </span>Option 1</span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                    </span>Option 1</span>\n                                <input type=\"hidden\" value=\"1\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n                                    </span>Option 2</span>\n                                <input type=\"hidden\" value=\"2\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n                                    </span>Option 3</span>\n                                <input type=\"hidden\" value=\"3\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n                                    </span>Option 4</span>\n                                <input type=\"hidden\" value=\"4\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr>\n    <div class=\"form-group has-error has-feedback max-width-400\">\n        <label for=\"15\">with external error feedback</label>\n        <div class=\"select dropdown has-error dropup\">\n            <button type=\"button\" id=\"15\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                <span class=\"selected-option-text\">Option 3</span>\n                <span class=\"clearButton hide pointer-events-none\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n                <span class=\"caret\">\n                </span>\n            </button>\n            <ul class=\"dropdown-menu\" role=\"menu\">\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                        <span class=\"selected-option-dropdown-item\">Option 1</span>\n                        <input type=\"hidden\" value=\"1\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                        <span class=\"selected-option-dropdown-item\">Option 2</span>\n                        <input type=\"hidden\" value=\"2\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                        <span class=\"selected-option-dropdown-item\">Option 3</span>\n                        <input type=\"hidden\" value=\"3\">\n                    </a>\n                </li>\n            </ul>\n        </div>\n        <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n        </span>\n        <span class=\"help-block\">\n            <span>This is an error message</span>\n        </span>\n    </div>\n    <hr>\n    <div class=\"max-width-400\">\n        <label for=\"18\">with built-in error feedback</label>\n        <div class=\"select dropdown dropup\">\n            <div class=\"form-group margin-bottom-0 has-feedback has-error\">\n                <div class=\"input-group\">\n                    <div class=\"input-group-addon\">\n                        <span class=\"rioglyph rioglyph-robot\">\n                        </span>\n                    </div>\n                    <div class=\"form-control-feedback-wrapper\">\n                        <button type=\"button\" id=\"18\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                            <span class=\"selected-option-text\">Option 3</span>\n                            <span class=\"clearButton hide pointer-events-none\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                            <span class=\"caret\">\n                            </span>\n                        </button>\n                        <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n                        </span>\n                        <span class=\"help-block white-space-normal\">\n                            <span>This is an error message</span>\n                        </span>\n                    </div>\n                </div>\n            </div>\n            <ul class=\"dropdown-menu\" role=\"menu\">\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                        <span class=\"selected-option-dropdown-item\">Option 1</span>\n                        <input type=\"hidden\" value=\"1\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                        <span class=\"selected-option-dropdown-item\">Option 2</span>\n                        <input type=\"hidden\" value=\"2\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                        <span class=\"selected-option-dropdown-item\">Option 3</span>\n                        <input type=\"hidden\" value=\"3\">\n                    </a>\n                </li>\n            </ul>\n        </div>\n    </div>\n    <hr>\n    <div class=\"form-group\">\n        <label for=\"16\">with custom button classes</label>\n        <div class=\"form-inline\">\n            <div class=\"form-group\">\n                <div class=\"select dropdown shadow-none dropup\">\n                    <button type=\"button\" id=\"16\" class=\"dropdown-toggle form-control text-left btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none input-lg\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">Option 3</span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                <span class=\"selected-option-dropdown-item\">Option 1</span>\n                                <input type=\"hidden\" value=\"1\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                <span class=\"selected-option-dropdown-item\">Option 2</span>\n                                <input type=\"hidden\" value=\"2\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                <span class=\"selected-option-dropdown-item\">Option 3</span>\n                                <input type=\"hidden\" value=\"3\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <div class=\"select dropdown shadow-none dropup\">\n                    <button type=\"button\" class=\"dropdown-toggle form-control text-left btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">Option 3</span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                <span class=\"selected-option-dropdown-item\">Option 1</span>\n                                <input type=\"hidden\" value=\"1\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                <span class=\"selected-option-dropdown-item\">Option 2</span>\n                                <input type=\"hidden\" value=\"2\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                <span class=\"selected-option-dropdown-item\">Option 3</span>\n                                <input type=\"hidden\" value=\"3\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <div class=\"select dropdown shadow-none dropup\">\n                    <button type=\"button\" class=\"dropdown-toggle form-control text-left btn btn-link height-auto padding-0 focus-shadow-none hover-bg-none input-sm\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">Option 3</span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                <span class=\"selected-option-dropdown-item\">Option 1</span>\n                                <input type=\"hidden\" value=\"1\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                <span class=\"selected-option-dropdown-item\">Option 2</span>\n                                <input type=\"hidden\" value=\"2\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                <span class=\"selected-option-dropdown-item\">Option 3</span>\n                                <input type=\"hidden\" value=\"3\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr>\n    <div class=\"form-group\">\n        <label for=\"17\">with icons only</label>\n        <div class=\"form-inline\">\n            <div class=\"form-group\">\n                <div class=\"select dropdown dropup\">\n                    <button type=\"button\" id=\"17\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">\n                            <span>\n                                <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                </span>\n                            </span>\n                        </span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                    </span>Option 1</span>\n                                <input type=\"hidden\" value=\"1\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n                                    </span>Option 2</span>\n                                <input type=\"hidden\" value=\"2\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n                                    </span>Option 3</span>\n                                <input type=\"hidden\" value=\"3\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n                                    </span>Option 4</span>\n                                <input type=\"hidden\" value=\"4\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <div class=\"select dropdown dropup\">\n                    <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">\n                            <span class=\"\">\n                                <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                </span>\n                            </span>\n                            <span class=\"inactiveIcon\">\n                                <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n                                </span>\n                            </span>\n                            <span class=\"inactiveIcon\">\n                                <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n                                </span>\n                            </span>\n                            <span class=\"inactiveIcon\">\n                                <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n                                </span>\n                            </span>\n                        </span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n                                    </span>Option 1</span>\n                                <input type=\"hidden\" value=\"1\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n                                    </span>Option 2</span>\n                                <input type=\"hidden\" value=\"2\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n                                    </span>Option 3</span>\n                                <input type=\"hidden\" value=\"3\">\n                            </a>\n                        </li>\n                        <li class=\"\" role=\"listitem\">\n                            <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                                <span class=\"selected-option-dropdown-item\">\n                                    <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n                                    </span>Option 4</span>\n                                <input type=\"hidden\" value=\"4\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"18\">with loading spinner</label>\n        <div class=\"form-inline\">\n            <div class=\"form-group\">\n                <div class=\"select dropdown dropup\">\n                    <button type=\"button\" id=\"18\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        <span class=\"selected-option-text\">\n                            <span class=\"placeholder\">Please select</span>\n                        </span>\n                        <span class=\"clearButton hide pointer-events-none\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                        <span class=\"caret\">\n                        </span>\n                    </button>\n                    <ul class=\"dropdown-menu\" role=\"menu\">\n                        <div class=\"display-flex justify-content-center padding-10\">\n                            <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n                                <div class=\"spinner\">\n                                    <div>\n                                    </div>\n                                    <div>\n                                    </div>\n                                    <div>\n                                    </div>\n                                    <div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "name",
+                      "type": "String",
+                      "default": "",
+                      "description": "Passed through as HTML attribute to the toggle button."
+                    },
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label in front of the selected text."
+                    },
+                    {
+                      "name": "options",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "Items to display in the dropdown menu."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "Used to identify an option"
+                    },
+                    {
+                      "name": "└label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The option item text"
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Icon to be displayed in front of the label"
+                    },
+                    {
+                      "name": "└selected",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the menu item is selected."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Setting \"disabled\" to true will disable the respective item."
+                    },
+                    {
+                      "name": "└header",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Will treat the given value as a menu header."
+                    },
+                    {
+                      "name": "value",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Sets the ids of the selected options when the component is already mounted."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when an item is selected."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text to display when nothing is selected."
+                    },
+                    {
+                      "name": "dropup",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "pullRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "autoDropDirection",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Option to disable the opening of the option list."
+                    },
+                    {
+                      "name": "tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "hasError",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
+                    },
+                    {
+                      "name": "useFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the component should be filterable."
+                    },
+                    {
+                      "name": "useClear",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show a clear button"
+                    },
+                    {
+                      "name": "noItemMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text that shall be shown when not match was found when filtering."
+                    },
+                    {
+                      "name": "selectedOptionText",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text or node to be rendered on the toggle select instead of the selected item label."
+                    },
+                    {
+                      "name": "showSelectedItemIcon",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show only the icon and not the label of selected item."
+                    },
+                    {
+                      "name": "showUnselectedItemIcons",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
+                    },
+                    {
+                      "name": "inputAddon",
+                      "type": "String | ReactNode",
+                      "default": "",
+                      "description": "Option to add an icon as a leading input addon to the select component."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Input error message."
+                    },
+                    {
+                      "name": "warningMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Input warning message."
+                    },
+                    {
+                      "name": "messageWhiteSpace",
+                      "type": "'normal' | 'prewrap' | 'nowrap'",
+                      "default": "'normal'",
+                      "description": "Optional warning message white-space setting."
+                    },
+                    {
+                      "name": "dropdownClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the dropdown."
+                    },
+                    {
+                      "name": "btnClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the select/input."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the select wrapper."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Select with controlled value</label><div class=\"form-inline\"><div class=\"form-group\"><div class=\"select dropdown min-width-300 dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"placeholder\">Please select</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div><div class=\"form-group\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Select option 3</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nconst ControlledSelectExample = () => {\n    const [selectedOptionId, setSelectedOptionId] = useState<string | undefined>();\n\n    const options = [\n        { id: '1', label: 'Option 1' },\n        { id: '2', label: 'Option 2' },\n        { id: '3', label: 'Option 3' },\n    ];\n\n    const updateSelectedItem = (item: SelectOption | undefined) => setSelectedOptionId(item?.id);\n\n    return (\n        <div>\n            <label>Select with controlled value</label>\n            <div className='form-inline'>\n                <div className='form-group'>\n                    <Select\n                        placeholder='Please select'\n                        options={options}\n                        value={selectedOptionId ? [selectedOptionId] : []}\n                        onChange={item => updateSelectedItem(item)}\n                        className='min-width-300'\n                        useClear\n                    />\n                </div>\n                <div className='form-group'>\n                    <Button onClick={() => updateSelectedItem(options[2])}>Select option 3</Button>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default ControlledSelectExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Select with controlled value</label>\n    <div class=\"form-inline\">\n        <div class=\"form-group\">\n            <div class=\"select dropdown min-width-300 dropup\">\n                <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">\n                        <span class=\"placeholder\">Please select</span>\n                    </span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n                <ul class=\"dropdown-menu\" role=\"menu\">\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                            <span class=\"selected-option-dropdown-item\">Option 1</span>\n                            <input type=\"hidden\" value=\"1\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                            <span class=\"selected-option-dropdown-item\">Option 2</span>\n                            <input type=\"hidden\" value=\"2\">\n                        </a>\n                    </li>\n                    <li class=\"\" role=\"listitem\">\n                        <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                            <span class=\"selected-option-dropdown-item\">Option 3</span>\n                            <input type=\"hidden\" value=\"3\">\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"form-group\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Select option 3</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "name",
+                      "type": "String",
+                      "default": "",
+                      "description": "Passed through as HTML attribute to the toggle button."
+                    },
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label in front of the selected text."
+                    },
+                    {
+                      "name": "options",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "Items to display in the dropdown menu."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "Used to identify an option"
+                    },
+                    {
+                      "name": "└label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The option item text"
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Icon to be displayed in front of the label"
+                    },
+                    {
+                      "name": "└selected",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the menu item is selected."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Setting \"disabled\" to true will disable the respective item."
+                    },
+                    {
+                      "name": "└header",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Will treat the given value as a menu header."
+                    },
+                    {
+                      "name": "value",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Sets the ids of the selected options when the component is already mounted."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when an item is selected."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text to display when nothing is selected."
+                    },
+                    {
+                      "name": "dropup",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "pullRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "autoDropDirection",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Option to disable the opening of the option list."
+                    },
+                    {
+                      "name": "tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "hasError",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
+                    },
+                    {
+                      "name": "useFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the component should be filterable."
+                    },
+                    {
+                      "name": "useClear",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show a clear button"
+                    },
+                    {
+                      "name": "noItemMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text that shall be shown when not match was found when filtering."
+                    },
+                    {
+                      "name": "selectedOptionText",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text or node to be rendered on the toggle select instead of the selected item label."
+                    },
+                    {
+                      "name": "showSelectedItemIcon",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show only the icon and not the label of selected item."
+                    },
+                    {
+                      "name": "showUnselectedItemIcons",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
+                    },
+                    {
+                      "name": "inputAddon",
+                      "type": "String | ReactNode",
+                      "default": "",
+                      "description": "Option to add an icon as a leading input addon to the select component."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Input error message."
+                    },
+                    {
+                      "name": "warningMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Input warning message."
+                    },
+                    {
+                      "name": "messageWhiteSpace",
+                      "type": "'normal' | 'prewrap' | 'nowrap'",
+                      "default": "'normal'",
+                      "description": "Optional warning message white-space setting."
+                    },
+                    {
+                      "name": "dropdownClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the dropdown."
+                    },
+                    {
+                      "name": "btnClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the select/input."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the select wrapper."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label for=\"selectDeferredOptions\">Select with deferred loaded options</label><div class=\"form-inline\"><div class=\"form-group\"><div class=\"select dropdown min-width-300\"><button type=\"button\" id=\"selectDeferredOptions\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\"><span class=\"placeholder\">Please select</span></span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button></div></div><div class=\"form-group\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Load options</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\ntype CustomSelectOption = SelectOption & {\n    foo: string;\n};\n\nconst ControlledFilterSelectExample = () => {\n    const [options, setOptions] = useState<CustomSelectOption[] | undefined>(undefined);\n    const [selectedOptionId, setSelectedOptionId] = useState<string | undefined>();\n\n    const updateSelectedItem = (item: CustomSelectOption | undefined) => setSelectedOptionId(item?.id);\n\n    const handleLoadOptions = () =>\n        setOptions([\n            { id: '1', label: 'Option 1', foo: 'bar' },\n            { id: '2', label: 'Option 2', foo: 'bar' },\n            { id: '3', label: 'Option 3', foo: 'bar' },\n        ]);\n\n    return (\n        <div>\n            <label htmlFor='selectDeferredOptions'>Select with deferred loaded options</label>\n            <div className='form-inline'>\n                <div className='form-group'>\n                    <Select\n                        id='selectDeferredOptions'\n                        placeholder='Please select'\n                        options={options}\n                        value={selectedOptionId ? [selectedOptionId] : []}\n                        onChange={item => updateSelectedItem(item)}\n                        className='min-width-300'\n                        useClear\n                        useFilter\n                    />\n                </div>\n                <div className='form-group'>\n                    <Button onClick={handleLoadOptions}>Load options</Button>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default ControlledFilterSelectExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label for=\"selectDeferredOptions\">Select with deferred loaded options</label>\n    <div class=\"form-inline\">\n        <div class=\"form-group\">\n            <div class=\"select dropdown min-width-300\">\n                <button type=\"button\" id=\"selectDeferredOptions\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"selected-option-text\">\n                        <span class=\"placeholder\">Please select</span>\n                    </span>\n                    <span class=\"clearButton hide pointer-events-none\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                    <span class=\"caret\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"form-group\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Load options</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "name",
+                      "type": "String",
+                      "default": "",
+                      "description": "Passed through as HTML attribute to the toggle button."
+                    },
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label in front of the selected text."
+                    },
+                    {
+                      "name": "options",
+                      "type": "Array of Objects",
+                      "default": "[]",
+                      "description": "Items to display in the dropdown menu."
+                    },
+                    {
+                      "name": "└id",
+                      "type": "String",
+                      "default": "",
+                      "description": "Used to identify an option"
+                    },
+                    {
+                      "name": "└label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The option item text"
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Icon to be displayed in front of the label"
+                    },
+                    {
+                      "name": "└selected",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the menu item is selected."
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Setting \"disabled\" to true will disable the respective item."
+                    },
+                    {
+                      "name": "└header",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Will treat the given value as a menu header."
+                    },
+                    {
+                      "name": "value",
+                      "type": "Array",
+                      "default": "",
+                      "description": "Sets the ids of the selected options when the component is already mounted."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when an item is selected."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text to display when nothing is selected."
+                    },
+                    {
+                      "name": "dropup",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "pullRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "autoDropDirection",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Option to disable the opening of the option list."
+                    },
+                    {
+                      "name": "tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "hasError",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
+                    },
+                    {
+                      "name": "useFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the component should be filterable."
+                    },
+                    {
+                      "name": "useClear",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show a clear button"
+                    },
+                    {
+                      "name": "noItemMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text that shall be shown when not match was found when filtering."
+                    },
+                    {
+                      "name": "selectedOptionText",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text or node to be rendered on the toggle select instead of the selected item label."
+                    },
+                    {
+                      "name": "showSelectedItemIcon",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show only the icon and not the label of selected item."
+                    },
+                    {
+                      "name": "showUnselectedItemIcons",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
+                    },
+                    {
+                      "name": "inputAddon",
+                      "type": "String | ReactNode",
+                      "default": "",
+                      "description": "Option to add an icon as a leading input addon to the select component."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Input error message."
+                    },
+                    {
+                      "name": "warningMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Input warning message."
+                    },
+                    {
+                      "name": "messageWhiteSpace",
+                      "type": "'normal' | 'prewrap' | 'nowrap'",
+                      "default": "'normal'",
+                      "description": "Optional warning message white-space setting."
+                    },
+                    {
+                      "name": "dropdownClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the dropdown."
+                    },
+                    {
+                      "name": "btnClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the select/input."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set to the select wrapper."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}