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="68697dea3c9db" data-uid="68697dea3c9e2" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--sm c-select--singleselect" id="68697dea3c2ed" data-js-toggle-item="68697dea3c2ed-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="68697dea3c30d">
            <label class="u-sr__only" for="select_68697dea3c2ed">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_68697dea3c2ed" 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="68697dea3c4ac">
                    </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="68697dea3c500">
                    </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="68697dea3c5e3">   
     <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="68697dea3c62d">
                    </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="68697dea3c2ed-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="68697dea3c6dd">
                    </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="68697dea3c71c">
                    </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="68697dea3c76e">
                    </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="68697dea3c7a6">
                    </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="68697dea3c7f2">
                    </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="68697dea3c827">
                    </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="68697dea3c872">
                    </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="68697dea3c8a5">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_68697dea3c2ed_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="68697dea3c8fa">
                    </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="68697dea3c944">
                    </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="68697dea3c978">
                    </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="68697dea3ced6" data-uid="68697dea3cedc" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--md c-select--singleselect" id="68697dea3ca1d" data-js-toggle-item="68697dea3ca1d-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="68697dea3ca2a">
            <label class="u-sr__only" for="select_68697dea3ca1d">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_68697dea3ca1d" 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="68697dea3caa3">
                    </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="68697dea3caeb">
                    </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="68697dea3cb43">   
     <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="68697dea3cb85">
                    </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="68697dea3ca1d-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="68697dea3cbf8">
                    </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="68697dea3cc30">
                    </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="68697dea3cc8d">
                    </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="68697dea3ccc5">
                    </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="68697dea3cd12">
                    </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="68697dea3cd49">
                    </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="68697dea3cd95">
                    </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="68697dea3cdcc">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_68697dea3ca1d_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="68697dea3ce18">
                    </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="68697dea3ce64">
                    </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="68697dea3cea4">
                    </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="68697dea3d348" data-uid="68697dea3d34d" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--lg c-select--singleselect" id="68697dea3cf0b" data-js-toggle-item="68697dea3cf0b-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="68697dea3cf17">
            <label class="u-sr__only" for="select_68697dea3cf0b">
            Select Single Name
        </label>
    
    
        <div class="c-select__field-container">
        
        <select id="select_68697dea3cf0b" 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="68697dea3cf87">
                    </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="68697dea3cfbe">
                    </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="68697dea3d007">   
     <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="68697dea3d03b">
                    </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="68697dea3cf0b-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="68697dea3d0ba">
                    </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="68697dea3d0eb">
                    </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="68697dea3d12e">
                    </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="68697dea3d15d">
                    </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="68697dea3d19d">
                    </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="68697dea3d1ca">
                    </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="68697dea3d20a">
                    </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="68697dea3d24c">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_68697dea3cf0b_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="68697dea3d29e">
                    </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="68697dea3d2e6">
                    </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="68697dea3d319">
                    </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="68697dea3d858" data-uid="68697dea3d85e" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--sm c-select--multiselect is-required" id="68697dea3d45a" data-js-toggle-item="68697dea3d45a-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="68697dea3d47f">
    
            <label class="c-field__label" for="select_68697dea3d45a">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_68697dea3d45a" 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="68697dea3d4fb">
                    </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="68697dea3d537">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="68697dea3d45a-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="68697dea3d5aa">
                    </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="68697dea3d5e2">
                    </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="68697dea3d62d">
                    </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="68697dea3d66f">
                    </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="68697dea3d6ba">
                    </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="68697dea3d6ef">
                    </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="68697dea3d736">
                    </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="68697dea3d769">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_68697dea3d45a_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="68697dea3d7b0">
                    </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="68697dea3d7f7">
                    </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="68697dea3d82a">
                    </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="68697dea3dbef" data-uid="68697dea3dbf4" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--md c-select--multiselect is-required" id="68697dea3d88a" data-js-toggle-item="68697dea3d88a-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="68697dea3d89a">
    
            <label class="c-field__label" for="select_68697dea3d88a">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_68697dea3d88a" 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="68697dea3d908">
                    </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="68697dea3d939">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="68697dea3d88a-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="68697dea3d99c">
                    </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="68697dea3d9cd">
                    </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="68697dea3da0e">
                    </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="68697dea3da42">
                    </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="68697dea3da83">
                    </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="68697dea3dab0">
                    </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="68697dea3daf0">
                    </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="68697dea3db1d">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_68697dea3d88a_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="68697dea3db5b">
                    </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="68697dea3db9a">
                    </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="68697dea3dbc7">
                    </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="68697dea3df70" data-uid="68697dea3df75" method="GET" action="?q=select-single">

    
    
    <div class="c-field c-select c-select--lg c-select--multiselect is-required" id="68697dea3dc1c" data-js-toggle-item="68697dea3dc1c-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="68697dea3dc2a">
    
            <label class="c-field__label" for="select_68697dea3dc1c">
            Select Multiple Name
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_68697dea3dc1c" 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="68697dea3dc80">
                    </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="68697dea3dcb2">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="68697dea3dc1c-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="68697dea3dd1e">
                    </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="68697dea3dd4e">
                    </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="68697dea3dd8e">
                    </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="68697dea3ddbc">
                    </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="68697dea3ddfc">
                    </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="68697dea3de2f">
                    </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="68697dea3de6f">
                    </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="68697dea3de9d">
                    </span>
    <span class="c-select__option-label">Option & Four</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_68697dea3dc1c_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="68697dea3dedc">
                    </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="68697dea3df1b">
                    </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="68697dea3df48">
                    </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