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="id_69e8d4dd23429" data-uid="69e8d4dd23433" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--sm c-select--singleselect" id="id_69e8d4dd22b7c" data-js-toggle-item="69e8d4dd22b7c-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="69e8d4dd22ba2">
<label class="u-sr__only" for="select_69e8d4dd22b7c">
Select Single Name
</label>
<div class="c-select__field-container">
<select id="select_69e8d4dd22b7c" 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" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd22e39">
</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" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd22eab">
</span>
</div> <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" data-js-select-clear="1" aria-label="close" type="button" data-uid="69e8d4dd22f69">
<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" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd22fb4">
</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="69e8d4dd22b7c-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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23080">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd230c7">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2312b">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23169">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd231d5">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23214">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2326e">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd232ab">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_69e8d4dd22b7c_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" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd23314">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2336f">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd233aa">
</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="id_69e8d4dd239c1" data-uid="69e8d4dd239c9" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--md c-select--singleselect" id="id_69e8d4dd23479" data-js-toggle-item="69e8d4dd23479-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="69e8d4dd23489">
<label class="u-sr__only" for="select_69e8d4dd23479">
Select Single Name
</label>
<div class="c-select__field-container">
<select id="select_69e8d4dd23479" 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" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2350d">
</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" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23550">
</span>
</div> <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" data-js-select-clear="1" aria-label="close" type="button" data-uid="69e8d4dd235b9">
<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" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd235fa">
</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="69e8d4dd23479-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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2368e">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd236d0">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23729">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23767">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd237c1">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd237fe">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23855">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2388e">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_69e8d4dd23479_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" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd238e7">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2393d">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23989">
</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="id_69e8d4dd23f8d" data-uid="69e8d4dd23f96" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--lg c-select--singleselect" id="id_69e8d4dd239fd" data-js-toggle-item="69e8d4dd239fd-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="69e8d4dd23a10">
<label class="u-sr__only" for="select_69e8d4dd239fd">
Select Single Name
</label>
<div class="c-select__field-container">
<select id="select_69e8d4dd239fd" 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" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23a88">
</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" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23ac8">
</span>
</div> <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" data-js-select-clear="1" aria-label="close" type="button" data-uid="69e8d4dd23b22">
<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" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23b5f">
</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="69e8d4dd239fd-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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23bef">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23c2f">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23c88">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23cc6">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23d1f">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23dde">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23e3a">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23e73">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_69e8d4dd239fd_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" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd23ecc">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23f1e">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd23f57">
</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>
@endforeachMultiple Select
Plenty of select
<div style="min-height: 100px">
<!-- form.blade.php -->
<form class="c-form js-form-validation" id="id_69e8d4dd2446f" data-uid="69e8d4dd24477" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--sm c-select--multiselect is-required" id="id_69e8d4dd24015" data-js-toggle-item="69e8d4dd24015-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="69e8d4dd2402c">
<label class="c-field__label" for="select_69e8d4dd24015">
Select Multiple Name
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_69e8d4dd24015" 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" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd240a5">
</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" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd240e4">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="69e8d4dd24015-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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2417d">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd241ba">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2420f">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2424b">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2429d">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd242d6">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24326">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2435e">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_69e8d4dd24015_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" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd243b0">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24402">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2443a">
</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="id_69e8d4dd24924" data-uid="69e8d4dd2492e" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--md c-select--multiselect is-required" id="id_69e8d4dd244aa" data-js-toggle-item="69e8d4dd244aa-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="69e8d4dd244bd">
<label class="c-field__label" for="select_69e8d4dd244aa">
Select Multiple Name
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_69e8d4dd244aa" 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" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2453d">
</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" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24579">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="69e8d4dd244aa-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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd245fc">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24637">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2468a">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd246c3">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24714">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2474c">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2479c">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd247d4">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_69e8d4dd244aa_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" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd24826">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2487b">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd248b5">
</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="id_69e8d4dd24df0" data-uid="69e8d4dd24df8" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--lg c-select--multiselect is-required" id="id_69e8d4dd2496d" data-js-toggle-item="69e8d4dd2496d-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="69e8d4dd24981">
<label class="c-field__label" for="select_69e8d4dd2496d">
Select Multiple Name
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_69e8d4dd2496d" 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" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd249fe">
</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" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24a42">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="69e8d4dd2496d-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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24aca">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24b0a">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24b61">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24b9f">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24bf8">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24c30">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24c88">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24cc3">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_69e8d4dd2496d_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" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd24d28">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24d7e">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24db9">
</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>
@endforeachSearchable Select
Expand to search
<div style="min-height: 100px">
<!-- form.blade.php -->
<form class="c-form js-form-validation" id="id_69e8d4dd26cd0" data-uid="69e8d4dd26cd9" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--md c-select--multiselect is-required" id="id_69e8d4dd24e77" data-js-toggle-item="69e8d4dd24e77-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="69e8d4dd24e8d">
<label class="c-field__label" for="select_69e8d4dd24e77">
Searchable Multi Select
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_69e8d4dd24e77" 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="key1" >
Apple
</option>
<option class="c-select__select-option" value="key2" >
Banana
</option>
<option class="c-select__select-option" value="key3" >
Cherry
</option>
<option class="c-select__select-option" value="key4" >
Date
</option>
<option class="c-select__select-option" value="key5" >
Elderberry
</option>
<option class="c-select__select-option" value="key6" >
Fig
</option>
<option class="c-select__select-option" value="key7" >
Grape
</option>
<option class="c-select__select-option" value="key8" >
Honeydew
</option>
<option class="c-select__select-option" value="key9" >
Indian Fig
</option>
<option class="c-select__select-option" value="key10" >
Jackfruit
</option>
<option class="c-select__select-option" value="key11" >
Kiwi
</option>
<option class="c-select__select-option" value="key12" >
Lemon
</option>
<option class="c-select__select-option" value="key13" >
Mango
</option>
<option class="c-select__select-option" value="key14" >
Nectarine
</option>
<option class="c-select__select-option" value="key15" >
Orange
</option>
<option class="c-select__select-option" value="key16" >
Papaya
</option>
<option class="c-select__select-option" value="key17" >
Quince
</option>
<option class="c-select__select-option" value="key18" >
Raspberry
</option>
<option class="c-select__select-option" value="key19" >
Strawberry
</option>
<option class="c-select__select-option" value="key20" >
Tangerine
</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" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24f1d">
</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" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd24f5f">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="69e8d4dd24e77-open-dropdown" data-js-placeholder="Search for options">
Search for options
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<!-- field.blade.php -->
<div class="c-field c-select__search-field c-field--search c-field--icon c-field--sm c-field--radius-md" id="id_69e8d4dd2502d" data-uid="69e8d4dd2504d">
<div class="c-field__inner c-field__inner--search">
<!-- icon.blade.php -->
<span class="c-icon c-field__icon c-icon--search c-icon--material c-icon--material-search material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="search" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd25097">
</span>
<input id="input_id_69e8d4dd2502d" value="" aria-label="" data-js-select-search-input="1" placeholder="Search..." type="search" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd250ea">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2512b">
</span>
</div>
</div>
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25194">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd251d3">
</span>
<span class="c-select__option-label">Apple</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--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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2522f">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2526c">
</span>
<span class="c-select__option-label">Banana</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd252c3">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd252ff">
</span>
<span class="c-select__option-label">Cherry</span>
</li> <li class="c-select__option " data-js-dropdown-option="key4" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25355">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25390">
</span>
<span class="c-select__option-label">Date</span>
</li> <li class="c-select__option " data-js-dropdown-option="key5" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd253e5">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25421">
</span>
<span class="c-select__option-label">Elderberry</span>
</li> <li class="c-select__option " data-js-dropdown-option="key6" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25475">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd254bc">
</span>
<span class="c-select__option-label">Fig</span>
</li> <li class="c-select__option " data-js-dropdown-option="key7" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25511">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2554c">
</span>
<span class="c-select__option-label">Grape</span>
</li> <li class="c-select__option " data-js-dropdown-option="key8" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd255a2">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd255da">
</span>
<span class="c-select__option-label">Honeydew</span>
</li> <li class="c-select__option " data-js-dropdown-option="key9" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25629">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25661">
</span>
<span class="c-select__option-label">Indian Fig</span>
</li> <li class="c-select__option " data-js-dropdown-option="key10" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd256b1">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd256e7">
</span>
<span class="c-select__option-label">Jackfruit</span>
</li> <li class="c-select__option " data-js-dropdown-option="key11" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25737">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2576e">
</span>
<span class="c-select__option-label">Kiwi</span>
</li> <li class="c-select__option " data-js-dropdown-option="key12" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd257be">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd257f5">
</span>
<span class="c-select__option-label">Lemon</span>
</li> <li class="c-select__option " data-js-dropdown-option="key13" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25844">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2587b">
</span>
<span class="c-select__option-label">Mango</span>
</li> <li class="c-select__option " data-js-dropdown-option="key14" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd258ea">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25922">
</span>
<span class="c-select__option-label">Nectarine</span>
</li> <li class="c-select__option " data-js-dropdown-option="key15" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25971">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd259a8">
</span>
<span class="c-select__option-label">Orange</span>
</li> <li class="c-select__option " data-js-dropdown-option="key16" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd259f7">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25a2d">
</span>
<span class="c-select__option-label">Papaya</span>
</li> <li class="c-select__option " data-js-dropdown-option="key17" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25a7c">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25ab3">
</span>
<span class="c-select__option-label">Quince</span>
</li> <li class="c-select__option " data-js-dropdown-option="key18" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25b01">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25b38">
</span>
<span class="c-select__option-label">Raspberry</span>
</li> <li class="c-select__option " data-js-dropdown-option="key19" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25b88">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25bbe">
</span>
<span class="c-select__option-label">Strawberry</span>
</li> <li class="c-select__option " data-js-dropdown-option="key20" 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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25c0e">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25c45">
</span>
<span class="c-select__option-label">Tangerine</span>
</li> </ul>
<!-- typography.blade.php original: div -->
<div class="c-typography c-select__search-no-results c-typography__variant--div" aria-hidden="true" data-uid="69e8d4dd25ced">
No results found
</div></div> <div class="c-select__select-invalid-message" id="error_input_69e8d4dd24e77_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" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd25d53">
</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" data-material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25daa">
</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" data-material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25de5">
</span>
<span class="c-select__option-label">{OPTION_NAME}</span>
</li> </template>
</div>
<br>
<div class="c-field c-select c-select--md c-select--singleselect is-required" id="id_69e8d4dd25e1e" data-js-toggle-item="69e8d4dd25e1e-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="69e8d4dd25e30">
<label class="c-field__label" for="select_69e8d4dd25e1e">
Searchable Single Select
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_69e8d4dd25e1e" data-js-select-element="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="">Search for options</option>
<option class="c-select__select-option" value="key1" >
Apple
</option>
<option class="c-select__select-option" value="key2" >
Banana
</option>
<option class="c-select__select-option" value="key3" >
Cherry
</option>
<option class="c-select__select-option" value="key4" >
Date
</option>
<option class="c-select__select-option" value="key5" >
Elderberry
</option>
<option class="c-select__select-option" value="key6" >
Fig
</option>
<option class="c-select__select-option" value="key7" >
Grape
</option>
<option class="c-select__select-option" value="key8" >
Honeydew
</option>
<option class="c-select__select-option" value="key9" >
Indian Fig
</option>
<option class="c-select__select-option" value="key10" >
Jackfruit
</option>
<option class="c-select__select-option" value="key11" >
Kiwi
</option>
<option class="c-select__select-option" value="key12" >
Lemon
</option>
<option class="c-select__select-option" value="key13" >
Mango
</option>
<option class="c-select__select-option" value="key14" >
Nectarine
</option>
<option class="c-select__select-option" value="key15" >
Orange
</option>
<option class="c-select__select-option" value="key16" >
Papaya
</option>
<option class="c-select__select-option" value="key17" >
Quince
</option>
<option class="c-select__select-option" value="key18" >
Raspberry
</option>
<option class="c-select__select-option" value="key19" >
Strawberry
</option>
<option class="c-select__select-option" value="key20" >
Tangerine
</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" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25eb7">
</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" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25ef4">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="69e8d4dd25e1e-open-dropdown" data-js-placeholder="">
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<!-- field.blade.php -->
<div class="c-field c-select__search-field c-field--search c-field--icon c-field--sm c-field--radius-md" id="id_69e8d4dd25f66" data-uid="69e8d4dd25f7d">
<div class="c-field__inner c-field__inner--search">
<!-- icon.blade.php -->
<span class="c-icon c-field__icon c-icon--search c-icon--material c-icon--material-search material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="search" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd25fb8">
</span>
<input id="input_id_69e8d4dd25f66" value="" aria-label="" data-js-select-search-input="1" placeholder="Search..." type="search" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd25ff8">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26033">
</span>
</div>
</div>
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd260a1">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd260dc">
</span>
<span class="c-select__option-label">Apple</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26130">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26169">
</span>
<span class="c-select__option-label">Banana</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd261bb">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd261f2">
</span>
<span class="c-select__option-label">Cherry</span>
</li> <li class="c-select__option " data-js-dropdown-option="key4" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26243">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2627b">
</span>
<span class="c-select__option-label">Date</span>
</li> <li class="c-select__option " data-js-dropdown-option="key5" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd262cb">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26302">
</span>
<span class="c-select__option-label">Elderberry</span>
</li> <li class="c-select__option " data-js-dropdown-option="key6" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26352">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26389">
</span>
<span class="c-select__option-label">Fig</span>
</li> <li class="c-select__option " data-js-dropdown-option="key7" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd263d8">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2640f">
</span>
<span class="c-select__option-label">Grape</span>
</li> <li class="c-select__option " data-js-dropdown-option="key8" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26468">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2649f">
</span>
<span class="c-select__option-label">Honeydew</span>
</li> <li class="c-select__option " data-js-dropdown-option="key9" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd264ef">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26526">
</span>
<span class="c-select__option-label">Indian Fig</span>
</li> <li class="c-select__option " data-js-dropdown-option="key10" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26575">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd265ab">
</span>
<span class="c-select__option-label">Jackfruit</span>
</li> <li class="c-select__option " data-js-dropdown-option="key11" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd265fa">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26631">
</span>
<span class="c-select__option-label">Kiwi</span>
</li> <li class="c-select__option " data-js-dropdown-option="key12" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26680">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd266b6">
</span>
<span class="c-select__option-label">Lemon</span>
</li> <li class="c-select__option " data-js-dropdown-option="key13" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26705">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2673d">
</span>
<span class="c-select__option-label">Mango</span>
</li> <li class="c-select__option " data-js-dropdown-option="key14" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2678b">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd267c2">
</span>
<span class="c-select__option-label">Nectarine</span>
</li> <li class="c-select__option " data-js-dropdown-option="key15" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26811">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2687c">
</span>
<span class="c-select__option-label">Orange</span>
</li> <li class="c-select__option " data-js-dropdown-option="key16" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd268d0">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26907">
</span>
<span class="c-select__option-label">Papaya</span>
</li> <li class="c-select__option " data-js-dropdown-option="key17" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26957">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd2698e">
</span>
<span class="c-select__option-label">Quince</span>
</li> <li class="c-select__option " data-js-dropdown-option="key18" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd269de">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26a15">
</span>
<span class="c-select__option-label">Raspberry</span>
</li> <li class="c-select__option " data-js-dropdown-option="key19" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26a64">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26a9c">
</span>
<span class="c-select__option-label">Strawberry</span>
</li> <li class="c-select__option " data-js-dropdown-option="key20" 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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26aeb">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26b29">
</span>
<span class="c-select__option-label">Tangerine</span>
</li> </ul>
<!-- typography.blade.php original: div -->
<div class="c-typography c-select__search-no-results c-typography__variant--div" aria-hidden="true" data-uid="69e8d4dd26b7c">
No results found
</div></div> <div class="c-select__select-invalid-message" id="error_input_69e8d4dd25e1e_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" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69e8d4dd26bd5">
</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" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26c39">
</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" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69e8d4dd26c73">
</span>
<span class="c-select__option-label">{OPTION_NAME}</span>
</li> </template>
</div>
</form>
</div>@php $options = [
'key1' => 'Apple',
'key2' => 'Banana',
'key3' => 'Cherry',
'key4' => 'Date',
'key5' => 'Elderberry',
'key6' => 'Fig',
'key7' => 'Grape',
'key8' => 'Honeydew',
'key9' => 'Indian Fig',
'key10' => 'Jackfruit',
'key11' => 'Kiwi',
'key12' => 'Lemon',
'key13' => 'Mango',
'key14' => 'Nectarine',
'key15' => 'Orange',
'key16' => 'Papaya',
'key17' => 'Quince',
'key18' => 'Raspberry',
'key19' => 'Strawberry',
'key20' => 'Tangerine'
]; @endphp
<div style="min-height: 100px">
@form([
'method' => 'GET',
'action' => '?q=select-single'
])
@select([
'label' => 'Searchable Multi Select',
'required' => true,
'placeholder' => "Search for options",
'preselected' => [],
'multiple' => true,
'search' => true,
'options' => $options,
'size' => 'md'
])
@endselect
<br>
@select([
'label' => 'Searchable Single Select',
'required' => true,
'placeholder' => "Search for options",
'preselected' => [],
'multiple' => false,
'search' => true,
'options' => $options,
'size' => 'md'
])
@endselect
@endform
</div>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. |
| search | NULL | - | Enables a search input within the select dropdown. | |
| searchPlaceholder | Search... | string | - | The placeholder text for the search input. |
| searchNoResultsText | No results found | string | - | The text to show when no results are found in the search. |
| 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. |