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="680c32b487fcf" data-uid="680c32b487fd9" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--sm c-select--singleselect" id="680c32b4875d0" data-js-toggle-item="680c32b4875d0-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="680c32b4875fb">
            <label class="u-sr__only" for="select_680c32b4875d0">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_680c32b4875d0" 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="680c32b48780a">
                    </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="680c32b487883">
                    </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="680c32b48795e">   
     <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="680c32b4879c2">
                    </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="680c32b4875d0-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="680c32b487ac8">
                    </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="680c32b487b2c">
                    </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="680c32b487bb1">
                    </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="680c32b487c0d">
                    </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="680c32b487c8d">
                    </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="680c32b487ce8">
                    </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="680c32b487d66">
                    </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="680c32b487dc0">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_680c32b4875d0_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="680c32b487e57">
                    </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="680c32b487ede">
                    </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="680c32b487f33">
                    </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="680c32b488722" data-uid="680c32b48872b" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--md c-select--singleselect" id="680c32b488032" data-js-toggle-item="680c32b488032-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="680c32b488047">
            <label class="u-sr__only" for="select_680c32b488032">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_680c32b488032" 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="680c32b4880f4">
                    </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="680c32b48814f">
                    </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="680c32b4881c5">   
     <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="680c32b488220">
                    </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="680c32b488032-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="680c32b4882da">
                    </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="680c32b488333">
                    </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="680c32b4883aa">
                    </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="680c32b488400">
                    </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="680c32b488475">
                    </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="680c32b4884c8">
                    </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="680c32b48853b">
                    </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="680c32b48858d">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_680c32b488032_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="680c32b488607">
                    </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="680c32b48867c">
                    </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="680c32b4886d0">
                    </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="680c32b488e8f" data-uid="680c32b488e98" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--lg c-select--singleselect" id="680c32b48876e" data-js-toggle-item="680c32b48876e-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="680c32b488780">
            <label class="u-sr__only" for="select_680c32b48876e">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_680c32b48876e" 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="680c32b488819">
                    </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="680c32b488871">
                    </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="680c32b4888e3">   
     <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="680c32b488935">
                    </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="680c32b48876e-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="680c32b4889f4">
                    </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="680c32b488a4f">
                    </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="680c32b488add">
                    </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="680c32b488b3e">
                    </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="680c32b488bb3">
                    </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="680c32b488c19">
                    </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="680c32b488c94">
                    </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="680c32b488cec">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_680c32b48876e_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="680c32b488d65">
                    </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="680c32b488de7">
                    </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="680c32b488e41">
                    </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="680c32b4895c0" data-uid="680c32b4895c9" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--sm c-select--multiselect is-required" id="680c32b488f40" data-js-toggle-item="680c32b488f40-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="680c32b488f5e">
    
            <label class="c-field__label" for="select_680c32b488f40">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_680c32b488f40" 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="680c32b489006">
                    </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="680c32b489067">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="680c32b488f40-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="680c32b489122">
                    </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="680c32b489181">
                    </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="680c32b48920b">
                    </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="680c32b48926c">
                    </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="680c32b4892e1">
                    </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="680c32b489335">
                    </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="680c32b4893a9">
                    </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="680c32b4893fb">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_680c32b488f40_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="680c32b48946f">
                    </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="680c32b489500">
                    </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="680c32b489568">
                    </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="680c32b489c36" data-uid="680c32b489c3f" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--md c-select--multiselect is-required" id="680c32b489610" data-js-toggle-item="680c32b489610-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="680c32b48962b">
    
            <label class="c-field__label" for="select_680c32b489610">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_680c32b489610" 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="680c32b4896cd">
                    </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="680c32b48972b">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="680c32b489610-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="680c32b4897e4">
                    </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="680c32b489842">
                    </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="680c32b4898c5">
                    </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="680c32b48991a">
                    </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="680c32b489997">
                    </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="680c32b4899ef">
                    </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="680c32b489a63">
                    </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="680c32b489ab6">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_680c32b489610_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="680c32b489b28">
                    </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="680c32b489b9a">
                    </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="680c32b489bef">
                    </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="680c32b48a32f" data-uid="680c32b48a338" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--lg c-select--multiselect is-required" id="680c32b489c82" data-js-toggle-item="680c32b489c82-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="680c32b489c9b">
    
            <label class="c-field__label" for="select_680c32b489c82">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_680c32b489c82" 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="680c32b489d35">
                    </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="680c32b489d98">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="680c32b489c82-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="680c32b489e47">
                    </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="680c32b489eb3">
                    </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="680c32b489f33">
                    </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="680c32b489fa4">
                    </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="680c32b48a027">
                    </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="680c32b48a085">
                    </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="680c32b48a108">
                    </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="680c32b48a171">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_680c32b489c82_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="680c32b48a1f4">
                    </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="680c32b48a277">
                    </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="680c32b48a2e2">
                    </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