@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/selects.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#/components/selects
-*Captured:* 2026-03-06T10:40:28.606Z
+*Captured:* 2026-04-27T14:57:38.260Z
 
 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.
 
@@ -1132,11 +1132,16 @@ Option 4
 
 with loading spinner Please select
 
+Blank variant Lorem: Ipsum Ipsum
+Dolor
+
 #### React (tsx)
 
 ```tsx
 import Select from '@rio-cloud/rio-uikit/Select';
 import Notification from '@rio-cloud/rio-uikit/Notification';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import Divider from '@rio-cloud/rio-uikit/Divider';
 
 const options1 = [
     { id: '1', label: 'Option 1' },
@@ -1238,11 +1243,16 @@ const options7 = [
     },
 ];
 
+const options8 = [
+    { id: '1', label: 'Ipsum', selected: true },
+    { id: '2', label: 'Dolor' },
+];
+
 export default () => (
     <div>
         <div className='row'>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='1'>Notification callback</label>
+                <FormLabel htmlFor='1'>Notification callback</FormLabel>
                 <Select
                     id='1'
                     placeholder='Please select'
@@ -1254,18 +1264,18 @@ export default () => (
                 />
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='2'>with pre-selected item</label>
+                <FormLabel htmlFor='2'>with pre-selected item</FormLabel>
                 <Select id='2' options={options2} onChange={item => Notification.info(item?.label)} />
             </div>
             <div className='col-xs-12 col-sm-4 form-group'>
-                <label htmlFor='3'>with disabled item and group header</label>
+                <FormLabel htmlFor='3'>with disabled item and group header</FormLabel>
                 <Select id='3' placeholder='Please select' options={options3} />
             </div>
         </div>
 
         <div className='row'>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='4'>with filter</label>
+                <FormLabel htmlFor='4'>with filter</FormLabel>
                 <Select
                     id='4'
                     placeholder='Please select'
@@ -1275,11 +1285,11 @@ export default () => (
                 />
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='5'>with label</label>
+                <FormLabel htmlFor='5'>with label</FormLabel>
                 <Select id='5' placeholder='Please select' options={options4} label='Vehicle' />
             </div>
             <div className='col-xs-12 col-sm-4 form-group'>
-                <label htmlFor='6'>with input</label>
+                <FormLabel htmlFor='6'>with input</FormLabel>
                 <div className='input-group'>
                     <div className='input-group-btn'>
                         <Select id='6' options={options2} />
@@ -1288,7 +1298,7 @@ export default () => (
                 </div>
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='7'>with clear button</label>
+                <FormLabel htmlFor='7'>with clear button</FormLabel>
                 <Select
                     id='7'
                     placeholder='Please select'
@@ -1298,16 +1308,16 @@ export default () => (
                 />
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='8'>with "dropup"</label>
+                <FormLabel htmlFor='8'>with "dropup"</FormLabel>
                 <Select id='8' placeholder='Please select' options={options2} dropup />
             </div>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='9'>Disabled</label>
+                <FormLabel htmlFor='9'>Disabled</FormLabel>
                 <Select id='9' placeholder='Please select' disabled options={[]} />
             </div>
 
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='20'>With icon rendered in an inputAddon</label>
+                <FormLabel htmlFor='20'>With icon rendered in an inputAddon</FormLabel>
                 <Select
                     id='20'
                     placeholder='Please select'
@@ -1317,16 +1327,16 @@ export default () => (
                 />
             </div>
         </div>
-        <hr />
+        <Divider />
 
         <div className='row'>
             <div className='col-12 col-sm-4 form-group'>
-                <label htmlFor='10'>with truncated label</label>
+                <FormLabel htmlFor='10'>with truncated label</FormLabel>
                 <Select id='10' placeholder='Please select' options={options7} />
             </div>
             <div className='col-12 col-sm-8 display-flex flex-wrap justify-content-end gap-10'>
                 <div>
-                    <label htmlFor='11'>with "pullRight" on small selects</label>
+                    <FormLabel htmlFor='11'>with "pullRight" on small selects</FormLabel>
                     <div className='display-flex gap-10 align-items-end'>
                         <div className='form-group'>
                             <Select id='11' placeholder='Please select' options={options6} pullRight />
@@ -1337,7 +1347,7 @@ export default () => (
                     </div>
                 </div>
                 <div>
-                    <label htmlFor='13'>with "pullRight" and "width-auto"</label>
+                    <FormLabel htmlFor='13'>with "pullRight" and "width-auto"</FormLabel>
                     <div className='form-group'>
                         <Select
                             id='13'
@@ -1350,10 +1360,10 @@ export default () => (
                 </div>
             </div>
         </div>
-        <hr />
+        <Divider />
 
         <div className='form-group'>
-            <label htmlFor='14'>with custom sizes</label>
+            <FormLabel htmlFor='14'>with custom sizes</FormLabel>
             <div className='display-flex gap-10 align-items-end'>
                 <div className='form-group'>
                     <Select id='14' bsSize='lg' options={options5} />
@@ -1366,20 +1376,20 @@ export default () => (
                 </div>
             </div>
         </div>
-        <hr />
+        <Divider />
 
         <div className='form-group has-error has-feedback max-width-400'>
-            <label htmlFor='15'>with external error feedback</label>
+            <FormLabel htmlFor='15'>with external error feedback</FormLabel>
             <Select id='15' options={options2} hasError />
             <span className='form-control-feedback rioglyph rioglyph-error-sign' />
             <span className='help-block'>
                 <span>This is an error message</span>
             </span>
         </div>
-        <hr />
+        <Divider asSpacer />
 
         <div className='max-width-400'>
-            <label htmlFor='18'>with built-in error feedback</label>
+            <FormLabel htmlFor='18'>with built-in error feedback</FormLabel>
             <Select
                 id='18'
                 options={options2}
@@ -1387,10 +1397,10 @@ export default () => (
                 errorMessage='This is an error message'
             />
         </div>
-        <hr />
+        <Divider className='margin-top-50' />
 
         <div className='form-group'>
-            <label htmlFor='16'>with custom button classes</label>
+            <FormLabel htmlFor='16'>with custom button classes</FormLabel>
             <div className='form-inline'>
                 <div className='form-group'>
                     <Select
@@ -1418,10 +1428,10 @@ export default () => (
                 </div>
             </div>
         </div>
-        <hr />
+        <Divider />
 
         <div className='form-group'>
-            <label htmlFor='17'>with icons only</label>
+            <FormLabel htmlFor='17'>with icons only</FormLabel>
             <div className='form-inline'>
                 <div className='form-group'>
                     <Select id='17' options={options5} placeholder='Please select' showSelectedItemIcon />
@@ -1433,13 +1443,26 @@ export default () => (
         </div>
 
         <div className='form-group'>
-            <label htmlFor='18'>with loading spinner</label>
+            <FormLabel htmlFor='18'>with loading spinner</FormLabel>
             <div className='form-inline'>
                 <div className='form-group'>
                     <Select id='18' options={options1} placeholder='Please select' isLoading />
                 </div>
             </div>
         </div>
+
+        <Divider />
+        <div className='form-group max-width-200'>
+            <FormLabel htmlFor='19'>Blank variant</FormLabel>
+            <Select
+                id='19'
+                placeholder='Please select'
+                label='Lorem'
+                options={options8}
+                variant='blank'
+                btnClassName='width-auto padding-left-0'
+            />
+        </div>
     </div>
 );
 ```
@@ -1450,17 +1473,21 @@ export default () => (
 <div>
     <div class="row">
         <div class="col-12 col-sm-4 form-group">
-            <label for="1">Notification callback</label>
+            <label for="1" class="display-inline-block">
+                <span>Notification callback</span>
+            </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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu test-dropdownClassName max-width-100pct" role="menu">
@@ -1528,15 +1555,19 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="2">with pre-selected item</label>
+            <label for="2" class="display-inline-block">
+                <span>with pre-selected item</span>
+            </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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
@@ -1562,17 +1593,21 @@ export default () => (
             </div>
         </div>
         <div class="col-xs-12 col-sm-4 form-group">
-            <label for="3">with disabled item and group header</label>
+            <label for="3" class="display-inline-block">
+                <span>with disabled item and group header</span>
+            </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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
@@ -1603,17 +1638,21 @@ export default () => (
     </div>
     <div class="row">
         <div class="col-12 col-sm-4 form-group">
-            <label for="4">with filter</label>
+            <label for="4" class="display-inline-block">
+                <span>with filter</span>
+            </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 class="placeholder">Please select</span>
                     </span>
-                    <span class="clearButton hide pointer-events-none">
-                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                    <span class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
@@ -9621,18 +9660,22 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="5">with label</label>
+            <label for="5" class="display-inline-block">
+                <span>with label</span>
+            </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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
@@ -9664,17 +9707,21 @@ export default () => (
             </div>
         </div>
         <div class="col-xs-12 col-sm-4 form-group">
-            <label for="6">with input</label>
+            <label for="6" class="display-inline-block">
+                <span>with input</span>
+            </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 class="select-toggle-actions">
+                                <span class="clearButton hide pointer-events-none">
+                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                    </span>
+                                </span>
+                                <span class="caret">
                                 </span>
-                            </span>
-                            <span class="caret">
                             </span>
                         </button>
                         <ul class="dropdown-menu" role="menu">
@@ -9703,15 +9750,19 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="7">with clear button</label>
+            <label for="7" class="display-inline-block">
+                <span>with clear button</span>
+            </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 class="select-toggle-actions">
+                        <span class="clearButton">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
@@ -9737,15 +9788,19 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="8">with "dropup"</label>
+            <label for="8" class="display-inline-block">
+                <span>with "dropup"</span>
+            </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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
@@ -9771,24 +9826,30 @@ export default () => (
             </div>
         </div>
         <div class="col-12 col-sm-4 form-group">
-            <label for="9">Disabled</label>
+            <label for="9" class="display-inline-block">
+                <span>Disabled</span>
+            </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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </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">
+            <label for="20" class="display-inline-block">
+                <span>With icon rendered in an inputAddon</span>
+            </label>
+            <div class="select dropdown">
                 <div class="form-group margin-bottom-0">
                     <div class="input-group">
                         <div class="input-group-addon">
@@ -9800,11 +9861,13 @@ export default () => (
                                 <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 class="select-toggle-actions">
+                                    <span class="clearButton hide pointer-events-none">
+                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                        </span>
+                                    </span>
+                                    <span class="caret">
                                     </span>
-                                </span>
-                                <span class="caret">
                                 </span>
                             </button>
                         </div>
@@ -9875,18 +9938,25 @@ export default () => (
             </div>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="row">
         <div class="col-12 col-sm-4 form-group">
-            <label for="10">with truncated label</label>
-            <div class="select dropdown dropup">
+            <label for="10" class="display-inline-block">
+                <span>with truncated label</span>
+            </label>
+            <div class="select dropdown">
                 <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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
@@ -9913,17 +9983,21 @@ export default () => (
         </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>
+                <label for="11" class="display-inline-block">
+                    <span>with "pullRight" on small selects</span>
+                </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 class="select-toggle-actions">
+                                    <span class="clearButton hide pointer-events-none">
+                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                        </span>
+                                    </span>
+                                    <span class="caret">
                                     </span>
-                                </span>
-                                <span class="caret">
                                 </span>
                             </button>
                             <ul class="dropdown-menu pull-right" role="menu">
@@ -9952,11 +10026,13 @@ export default () => (
                         <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 class="select-toggle-actions">
+                                    <span class="clearButton hide pointer-events-none">
+                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                        </span>
+                                    </span>
+                                    <span class="caret">
                                     </span>
-                                </span>
-                                <span class="caret">
                                 </span>
                             </button>
                             <ul class="dropdown-menu pull-right" role="menu">
@@ -9984,16 +10060,20 @@ export default () => (
                 </div>
             </div>
             <div>
-                <label for="13">with "pullRight" and "width-auto"</label>
+                <label for="13" class="display-inline-block">
+                    <span>with "pullRight" and "width-auto"</span>
+                </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 class="select-toggle-actions">
+                                <span class="clearButton hide pointer-events-none">
+                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                    </span>
+                                </span>
+                                <span class="caret">
                                 </span>
-                            </span>
-                            <span class="caret">
                             </span>
                         </button>
                         <ul class="dropdown-menu pull-right width-auto" role="menu">
@@ -10021,9 +10101,14 @@ export default () => (
             </div>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="form-group">
-        <label for="14">with custom sizes</label>
+        <label for="14" class="display-inline-block">
+            <span>with custom sizes</span>
+        </label>
         <div class="display-flex gap-10 align-items-end">
             <div class="form-group">
                 <div class="select dropdown dropup">
@@ -10033,11 +10118,13 @@ export default () => (
                                 <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 class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10084,11 +10171,13 @@ export default () => (
                                 <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 class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10135,11 +10224,13 @@ export default () => (
                                 <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 class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10180,17 +10271,24 @@ export default () => (
             </div>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="form-group has-error has-feedback max-width-400">
-        <label for="15">with external error feedback</label>
+        <label for="15" class="display-inline-block">
+            <span>with external error feedback</span>
+        </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 class="select-toggle-actions">
+                    <span class="clearButton hide pointer-events-none">
+                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                        </span>
+                    </span>
+                    <span class="caret">
                     </span>
-                </span>
-                <span class="caret">
                 </span>
             </button>
             <ul class="dropdown-menu" role="menu">
@@ -10220,9 +10318,12 @@ export default () => (
             <span>This is an error message</span>
         </span>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+    </div>
     <div class="max-width-400">
-        <label for="18">with built-in error feedback</label>
+        <label for="18" class="display-inline-block">
+            <span>with built-in error feedback</span>
+        </label>
         <div class="select dropdown dropup">
             <div class="form-group margin-bottom-0 has-feedback has-error">
                 <div class="input-group">
@@ -10233,11 +10334,13 @@ export default () => (
                     <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 class="select-toggle-actions">
+                                <span class="clearButton hide pointer-events-none">
+                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                    </span>
+                                </span>
+                                <span class="caret">
                                 </span>
-                            </span>
-                            <span class="caret">
                             </span>
                         </button>
                         <span class="form-control-feedback rioglyph rioglyph-error-sign">
@@ -10270,19 +10373,26 @@ export default () => (
             </ul>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct margin-top-50" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="form-group">
-        <label for="16">with custom button classes</label>
+        <label for="16" class="display-inline-block">
+            <span>with custom button classes</span>
+        </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 class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10311,11 +10421,13 @@ export default () => (
                 <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 class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10344,11 +10456,13 @@ export default () => (
                 <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 class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10375,9 +10489,14 @@ export default () => (
             </div>
         </div>
     </div>
-    <hr>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
     <div class="form-group">
-        <label for="17">with icons only</label>
+        <label for="17" class="display-inline-block">
+            <span>with icons only</span>
+        </label>
         <div class="form-inline">
             <div class="form-group">
                 <div class="select dropdown dropup">
@@ -10388,11 +10507,13 @@ export default () => (
                                 </span>
                             </span>
                         </span>
-                        <span class="clearButton hide pointer-events-none">
-                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                        <span class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10452,11 +10573,13 @@ export default () => (
                                 </span>
                             </span>
                         </span>
-                        <span class="clearButton hide pointer-events-none">
-                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                        <span class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10498,7 +10621,9 @@ export default () => (
         </div>
     </div>
     <div class="form-group">
-        <label for="18">with loading spinner</label>
+        <label for="18" class="display-inline-block">
+            <span>with loading spinner</span>
+        </label>
         <div class="form-inline">
             <div class="form-group">
                 <div class="select dropdown dropup">
@@ -10506,11 +10631,13 @@ export default () => (
                         <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 class="select-toggle-actions">
+                            <span class="clearButton hide pointer-events-none">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                            <span class="caret">
                             </span>
-                        </span>
-                        <span class="caret">
                         </span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
@@ -10533,6 +10660,43 @@ export default () => (
             </div>
         </div>
     </div>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
+    <div class="form-group max-width-200">
+        <label for="19" class="display-inline-block">
+            <span>Blank variant</span>
+        </label>
+        <div class="select dropdown select-blank dropup">
+            <button type="button" id="19" class="dropdown-toggle form-control text-left width-auto padding-left-0" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+                <span class="selected-option-text">
+                    <span class="selected-option-text-label">Lorem:</span>Ipsum</span>
+                <span class="select-toggle-actions">
+                    <span class="clearButton hide pointer-events-none">
+                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                        </span>
+                    </span>
+                    <span class="caret">
+                    </span>
+                </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">Ipsum</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">Dolor</span>
+                        <input type="hidden" value="2">
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
 </div>
 ```
 
@@ -10557,6 +10721,7 @@ export default () => (
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | 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 |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -10638,11 +10803,13 @@ export default ControlledSelectExample;
                     <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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
@@ -10695,6 +10862,7 @@ export default ControlledSelectExample;
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | 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 |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -10782,11 +10950,13 @@ export default ControlledFilterSelectExample;
                     <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 class="select-toggle-actions">
+                        <span class="clearButton hide pointer-events-none">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                        <span class="caret">
                         </span>
-                    </span>
-                    <span class="caret">
                     </span>
                 </button>
             </div>
@@ -10819,6 +10989,7 @@ export default ControlledFilterSelectExample;
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | 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 |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |