Select

Ordered or unordered lists. Note: Due to reserverd keywords, this internally is called "listing" and not "list".

Select

Plenty of select

<div style="min-height: 100px">
            <!-- form.blade.php -->
<form class="c-form js-form-validation" id="67ee3fb26aa8a" data-uid="67ee3fb26aa90" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--sm c-select--singleselect" id="67ee3fb26a475" data-js-toggle-item="67ee3fb26a475-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true" data-js-select-type="single" data-uid="67ee3fb26a493">
            <label class="u-sr__only" for="select_67ee3fb26a475">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_67ee3fb26a475" data-js-select-element="1" class="c-select__select-element" tabindex="-1">
    
                            <option class="c-select__select-option" value="">Placeholder in single </option>
            
                            <option class="c-select__select-option" value="key" >
                    Option One
                </option>
                            <option class="c-select__select-option" value="key1" >
                    Option Two
                </option>
                            <option class="c-select__select-option" value="key2" >
                    Option Three
                </option>
                            <option class="c-select__select-option" value="key3" >
                    Option & Four
                </option>
            
                            
                    </select>
        <div class="c-select_focus-styler u-level-top"></div>        <div class="c-select__expand-button" role="button" >
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a5f7">
                    </span>
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a649">
                    </span>
</div>        <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" data-js-select-clear="1" aria-label="close" type="button" data-uid="67ee3fb26a6cb">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a70a">
                    </span>
            </span>
        
        
    </span> </button>        <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="67ee3fb26a475-open-dropdown" data-js-placeholder="">
    
</div>
</div>    </div>
    <!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
  <ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
              <li class="c-select__option " data-js-dropdown-option="key" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a7a4">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a7df">
                    </span>
    <span class="c-select__option-label">Option One</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a82d">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a863">
                    </span>
    <span class="c-select__option-label">Option Two</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key2" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a8ad">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a8e2">
                    </span>
    <span class="c-select__option-label">Option Three</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a929">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26a95c">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_67ee3fb26a475_message">
      <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="67ee3fb26a9b7">
                    </span>
  <span class="errorText"></span>
</div>
        <template>
        <li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26aa00">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26aa33">
                    </span>
    <span class="c-select__option-label">{OPTION_NAME}</span>
</li>    </template>
</div>
</form>
    </div>
    <div style="min-height: 100px">
            <!-- form.blade.php -->
<form class="c-form js-form-validation" id="67ee3fb26af2c" data-uid="67ee3fb26af32" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--md c-select--singleselect" id="67ee3fb26aac7" data-js-toggle-item="67ee3fb26aac7-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true" data-js-select-type="single" data-uid="67ee3fb26aad4">
            <label class="u-sr__only" for="select_67ee3fb26aac7">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_67ee3fb26aac7" data-js-select-element="1" class="c-select__select-element" tabindex="-1">
    
                            <option class="c-select__select-option" value="">Placeholder in single </option>
            
                            <option class="c-select__select-option" value="key" >
                    Option One
                </option>
                            <option class="c-select__select-option" value="key1" >
                    Option Two
                </option>
                            <option class="c-select__select-option" value="key2" >
                    Option Three
                </option>
                            <option class="c-select__select-option" value="key3" >
                    Option & Four
                </option>
            
                            
                    </select>
        <div class="c-select_focus-styler u-level-top"></div>        <div class="c-select__expand-button" role="button" >
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ab39">
                    </span>
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ab70">
                    </span>
</div>        <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" data-js-select-clear="1" aria-label="close" type="button" data-uid="67ee3fb26abb8">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26abeb">
                    </span>
            </span>
        
        
    </span> </button>        <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="67ee3fb26aac7-open-dropdown" data-js-placeholder="">
    
</div>
</div>    </div>
    <!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
  <ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
              <li class="c-select__option " data-js-dropdown-option="key" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ac5d">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ac93">
                    </span>
    <span class="c-select__option-label">Option One</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26acdc">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ad0f">
                    </span>
    <span class="c-select__option-label">Option Two</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key2" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ad56">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ad88">
                    </span>
    <span class="c-select__option-label">Option Three</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26add8">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ae09">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_67ee3fb26aac7_message">
      <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="67ee3fb26ae62">
                    </span>
  <span class="errorText"></span>
</div>
        <template>
        <li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26aeb6">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26aefc">
                    </span>
    <span class="c-select__option-label">{OPTION_NAME}</span>
</li>    </template>
</div>
</form>
    </div>
    <div style="min-height: 100px">
            <!-- form.blade.php -->
<form class="c-form js-form-validation" id="67ee3fb26b3c2" data-uid="67ee3fb26b3c8" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--lg c-select--singleselect" id="67ee3fb26af60" data-js-toggle-item="67ee3fb26af60-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true" data-js-select-type="single" data-uid="67ee3fb26af6c">
            <label class="u-sr__only" for="select_67ee3fb26af60">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_67ee3fb26af60" data-js-select-element="1" class="c-select__select-element" tabindex="-1">
    
                            <option class="c-select__select-option" value="">Placeholder in single </option>
            
                            <option class="c-select__select-option" value="key" >
                    Option One
                </option>
                            <option class="c-select__select-option" value="key1" >
                    Option Two
                </option>
                            <option class="c-select__select-option" value="key2" >
                    Option Three
                </option>
                            <option class="c-select__select-option" value="key3" >
                    Option & Four
                </option>
            
                            
                    </select>
        <div class="c-select_focus-styler u-level-top"></div>        <div class="c-select__expand-button" role="button" >
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26afd2">
                    </span>
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b00a">
                    </span>
</div>        <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" data-js-select-clear="1" aria-label="close" type="button" data-uid="67ee3fb26b055">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b08b">
                    </span>
            </span>
        
        
    </span> </button>        <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="67ee3fb26af60-open-dropdown" data-js-placeholder="">
    
</div>
</div>    </div>
    <!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
  <ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
              <li class="c-select__option " data-js-dropdown-option="key" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b101">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b139">
                    </span>
    <span class="c-select__option-label">Option One</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b191">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b1c8">
                    </span>
    <span class="c-select__option-label">Option Two</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key2" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b213">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b24b">
                    </span>
    <span class="c-select__option-label">Option Three</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b295">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b2c9">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_67ee3fb26af60_message">
      <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="67ee3fb26b314">
                    </span>
  <span class="errorText"></span>
</div>
        <template>
        <li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b35e">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b392">
                    </span>
    <span class="c-select__option-label">{OPTION_NAME}</span>
</li>    </template>
</div>
</form>
    </div>
@foreach(['sm', 'md', 'lg'] as $size)
    <div style="min-height: 100px">
        @form([
            'method' => 'GET',
            'action' => '?q=select-single'
        ])
            @select([
                'label' => 'Select Single Name',
                'hideLabel' => true,
                'placeholder' => "Placeholder in single ",
                'required' => false,

                'size' => $size,
                'options' => [
                    'key'   => 'Option One',
                    'key1'  => 'Option Two',
                    'key2'  => 'Option Three',
                    'key3'  => 'Option & Four',
                ]
            ])
            @endselect
        @endform
    </div>
@endforeach

Multiple Select

Plenty of select

Placeholder in multi
Placeholder in multi
Placeholder in multi
<div style="min-height: 100px">
            <!-- form.blade.php -->
<form class="c-form js-form-validation" id="67ee3fb26bb5c" data-uid="67ee3fb26bb62" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--sm c-select--multiselect is-required" id="67ee3fb26b72f" data-js-toggle-item="67ee3fb26b72f-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true" data-js-select-type="multiple" data-uid="67ee3fb26b746">
    
            <label class="c-field__label" for="select_67ee3fb26b72f">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_67ee3fb26b72f" data-js-select-element="1" multiple="multiple" data-js-select-max="-1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element" tabindex="-1">
    
            
                            <option class="c-select__select-option" value="key" selected>
                    Option One
                </option>
                            <option class="c-select__select-option" value="key1" >
                    Option Two
                </option>
                            <option class="c-select__select-option" value="key2" selected>
                    Option Three
                </option>
                            <option class="c-select__select-option" value="key3" >
                    Option & Four
                </option>
            
                            
                    </select>
        <div class="c-select_focus-styler u-level-top"></div>        <div class="c-select__expand-button" role="button" >
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b7bb">
                    </span>
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b7f7">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="67ee3fb26b72f-open-dropdown" data-js-placeholder="Placeholder in multi ">
    Placeholder in multi 
</div>
</div>    </div>
    <!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
  <ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
              <li class="c-select__option is-selected" data-js-dropdown-option="key" role="option" aria-selected="true" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b86c">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b8a4">
                    </span>
    <span class="c-select__option-label">Option One</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b8ef">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b923">
                    </span>
    <span class="c-select__option-label">Option Two</span>
</li>              <li class="c-select__option is-selected" data-js-dropdown-option="key2" role="option" aria-selected="true" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b989">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26b9c3">
                    </span>
    <span class="c-select__option-label">Option Three</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ba14">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26ba4e">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_67ee3fb26b72f_message">
      <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="67ee3fb26ba9e">
                    </span>
  <span class="errorText"></span>
</div>
        <template>
        <li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26baef">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bb28">
                    </span>
    <span class="c-select__option-label">{OPTION_NAME}</span>
</li>    </template>
</div>
</form>
    </div>
    <div style="min-height: 100px">
            <!-- form.blade.php -->
<form class="c-form js-form-validation" id="67ee3fb26bf8e" data-uid="67ee3fb26bf93" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--md c-select--multiselect is-required" id="67ee3fb26bb94" data-js-toggle-item="67ee3fb26bb94-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true" data-js-select-type="multiple" data-uid="67ee3fb26bba6">
    
            <label class="c-field__label" for="select_67ee3fb26bb94">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_67ee3fb26bb94" data-js-select-element="1" multiple="multiple" data-js-select-max="-1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element" tabindex="-1">
    
            
                            <option class="c-select__select-option" value="key" selected>
                    Option One
                </option>
                            <option class="c-select__select-option" value="key1" >
                    Option Two
                </option>
                            <option class="c-select__select-option" value="key2" selected>
                    Option Three
                </option>
                            <option class="c-select__select-option" value="key3" >
                    Option & Four
                </option>
            
                            
                    </select>
        <div class="c-select_focus-styler u-level-top"></div>        <div class="c-select__expand-button" role="button" >
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bc15">
                    </span>
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bc53">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="67ee3fb26bb94-open-dropdown" data-js-placeholder="Placeholder in multi ">
    Placeholder in multi 
</div>
</div>    </div>
    <!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
  <ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
              <li class="c-select__option is-selected" data-js-dropdown-option="key" role="option" aria-selected="true" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bccc">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bd07">
                    </span>
    <span class="c-select__option-label">Option One</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bd66">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bd9f">
                    </span>
    <span class="c-select__option-label">Option Two</span>
</li>              <li class="c-select__option is-selected" data-js-dropdown-option="key2" role="option" aria-selected="true" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bdf9">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26be3a">
                    </span>
    <span class="c-select__option-label">Option Three</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26be7f">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26beb0">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_67ee3fb26bb94_message">
      <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="67ee3fb26bef9">
                    </span>
  <span class="errorText"></span>
</div>
        <template>
        <li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bf38">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26bf65">
                    </span>
    <span class="c-select__option-label">{OPTION_NAME}</span>
</li>    </template>
</div>
</form>
    </div>
    <div style="min-height: 100px">
            <!-- form.blade.php -->
<form class="c-form js-form-validation" id="67ee3fb26c36d" data-uid="67ee3fb26c372" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--lg c-select--multiselect is-required" id="67ee3fb26bfce" data-js-toggle-item="67ee3fb26bfce-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true" data-js-select-type="multiple" data-uid="67ee3fb26bfde">
    
            <label class="c-field__label" for="select_67ee3fb26bfce">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_67ee3fb26bfce" data-js-select-element="1" multiple="multiple" data-js-select-max="-1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element" tabindex="-1">
    
            
                            <option class="c-select__select-option" value="key" selected>
                    Option One
                </option>
                            <option class="c-select__select-option" value="key1" >
                    Option Two
                </option>
                            <option class="c-select__select-option" value="key2" selected>
                    Option Three
                </option>
                            <option class="c-select__select-option" value="key3" >
                    Option & Four
                </option>
            
                            
                    </select>
        <div class="c-select_focus-styler u-level-top"></div>        <div class="c-select__expand-button" role="button" >
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c03e">
                    </span>
      <!-- icon.blade.php -->
    <span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c073">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="67ee3fb26bfce-open-dropdown" data-js-placeholder="Placeholder in multi ">
    Placeholder in multi 
</div>
</div>    </div>
    <!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
  <ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
              <li class="c-select__option is-selected" data-js-dropdown-option="key" role="option" aria-selected="true" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c0dd">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c112">
                    </span>
    <span class="c-select__option-label">Option One</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c162">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c195">
                    </span>
    <span class="c-select__option-label">Option Two</span>
</li>              <li class="c-select__option is-selected" data-js-dropdown-option="key2" role="option" aria-selected="true" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c1da">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c20c">
                    </span>
    <span class="c-select__option-label">Option Three</span>
</li>              <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c252">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c283">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_67ee3fb26bfce_message">
      <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="67ee3fb26c2ca">
                    </span>
  <span class="errorText"></span>
</div>
        <template>
        <li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c310">
                    </span>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67ee3fb26c341">
                    </span>
    <span class="c-select__option-label">{OPTION_NAME}</span>
</li>    </template>
</div>
</form>
    </div>
@foreach(['sm', 'md', 'lg'] as $size)
    <div style="min-height: 100px">
        @form([
            'method' => 'GET',
            'action' => '?q=select-single'
        ])
            @select([
                'label' => 'Select Multiple Name',
                'required' => true,
                'placeholder' => "Placeholder in multi ",
                'preselected' => ['key2', 'key'],
                'multiple' => true,
                'options' => [
                    'key'   => 'Option One',
                    'key1'  => 'Option Two',
                    'key2'  => 'Option Three',
                    'key3'  => 'Option & Four',
                ],
                'size' => $size
            ])
            @endselect
        @endform
    </div>
@endforeach

Blade component parameters

Key Default value Type Available values Description
label string - The placeholder of the dropdown
placeholder string - Supported if multiple select is enabled.
id false boolean - The id attribute for the select component. Will be prefixed with "select_"
description string - Additional description or instructions.
required false boolean - If the element should be required
options [] array - The options which can be selected. The key if the item will be used as value of the option and the value will be used as a label
errorMessage false boolean - -
preselected false boolean - Key of option to be preselected
multiple false boolean - Sets the select box to a multiple select
name false boolean - The name attribute for the select component
hideLabel false boolean - Hides the label
helperText string - Adds a helping text, below the element.
size md string - The size of the select component (sm, md, lg)
maxSelections false boolean - The maximum number of selections allowed. Will only be applied if "multiple" is true.
hidePlaceholder false boolean - Hides the placeholder but keeps the label
selectAttributeList [] array - Ann array with attributes that will be set on the actual select element.
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Select/select.json