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="682b32556cff5" data-uid="682b32556cffc" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--sm c-select--singleselect" id="682b32556c910" data-js-toggle-item="682b32556c910-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="682b32556c930">
<label class="u-sr__only" for="select_682b32556c910">
Select Single Name
</label>
<div class="c-select__field-container">
<select id="select_682b32556c910" data-js-select-element="1" class="c-select__select-element" tabindex="-1">
<option class="c-select__select-option" value="">Placeholder in single </option>
<option class="c-select__select-option" value="key" >
Option One
</option>
<option class="c-select__select-option" value="key1" >
Option Two
</option>
<option class="c-select__select-option" value="key2" >
Option Three
</option>
<option class="c-select__select-option" value="key3" >
Option & Four
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div> <div class="c-select__expand-button" role="button" >
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556caad">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cb09">
</span>
</div> <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" data-js-select-clear="1" aria-label="close" type="button" data-uid="682b32556cba2">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cbed">
</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="682b32556c910-open-dropdown" data-js-placeholder="">
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<li class="c-select__option " data-js-dropdown-option="key" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cca6">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cceb">
</span>
<span class="c-select__option-label">Option One</span>
</li> <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cd47">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cd85">
</span>
<span class="c-select__option-label">Option Two</span>
</li> <li class="c-select__option " data-js-dropdown-option="key2" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cddb">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556ce16">
</span>
<span class="c-select__option-label">Option Three</span>
</li> <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556ce6a">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cea4">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_682b32556c910_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b32556cf02">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cf54">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556cf8e">
</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="682b32556d50d" data-uid="682b32556d513" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--md c-select--singleselect" id="682b32556d042" data-js-toggle-item="682b32556d042-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="682b32556d051">
<label class="u-sr__only" for="select_682b32556d042">
Select Single Name
</label>
<div class="c-select__field-container">
<select id="select_682b32556d042" data-js-select-element="1" class="c-select__select-element" tabindex="-1">
<option class="c-select__select-option" value="">Placeholder in single </option>
<option class="c-select__select-option" value="key" >
Option One
</option>
<option class="c-select__select-option" value="key1" >
Option Two
</option>
<option class="c-select__select-option" value="key2" >
Option Three
</option>
<option class="c-select__select-option" value="key3" >
Option & Four
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div> <div class="c-select__expand-button" role="button" >
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d0c6">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d106">
</span>
</div> <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" data-js-select-clear="1" aria-label="close" type="button" data-uid="682b32556d158">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d193">
</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="682b32556d042-open-dropdown" data-js-placeholder="">
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<li class="c-select__option " data-js-dropdown-option="key" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d214">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d253">
</span>
<span class="c-select__option-label">Option One</span>
</li> <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d2a6">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d2e1">
</span>
<span class="c-select__option-label">Option Two</span>
</li> <li class="c-select__option " data-js-dropdown-option="key2" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d331">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d36a">
</span>
<span class="c-select__option-label">Option Three</span>
</li> <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d3ba">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d3fc">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_682b32556d042_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b32556d44e">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d49f">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d4d9">
</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="682b32556d9f6" data-uid="682b32556d9fc" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--lg c-select--singleselect" id="682b32556d545" data-js-toggle-item="682b32556d545-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="682b32556d552">
<label class="u-sr__only" for="select_682b32556d545">
Select Single Name
</label>
<div class="c-select__field-container">
<select id="select_682b32556d545" data-js-select-element="1" class="c-select__select-element" tabindex="-1">
<option class="c-select__select-option" value="">Placeholder in single </option>
<option class="c-select__select-option" value="key" >
Option One
</option>
<option class="c-select__select-option" value="key1" >
Option Two
</option>
<option class="c-select__select-option" value="key2" >
Option Three
</option>
<option class="c-select__select-option" value="key3" >
Option & Four
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div> <div class="c-select__expand-button" role="button" >
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d5be">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d5fb">
</span>
</div> <button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" data-js-select-clear="1" aria-label="close" type="button" data-uid="682b32556d64b">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d684">
</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="682b32556d545-open-dropdown" data-js-placeholder="">
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<li class="c-select__option " data-js-dropdown-option="key" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d703">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d73f">
</span>
<span class="c-select__option-label">Option One</span>
</li> <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d791">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d7cb">
</span>
<span class="c-select__option-label">Option Two</span>
</li> <li class="c-select__option " data-js-dropdown-option="key2" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d829">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d862">
</span>
<span class="c-select__option-label">Option Three</span>
</li> <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d8b2">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d8eb">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_682b32556d545_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b32556d93a">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d989">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556d9c3">
</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="682b32556dea4" data-uid="682b32556deaa" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--sm c-select--multiselect is-required" id="682b32556da71" data-js-toggle-item="682b32556da71-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="682b32556da86">
<label class="c-field__label" for="select_682b32556da71">
Select Multiple Name
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_682b32556da71" data-js-select-element="1" multiple="multiple" data-js-select-max="-1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element" tabindex="-1">
<option class="c-select__select-option" value="key" selected>
Option One
</option>
<option class="c-select__select-option" value="key1" >
Option Two
</option>
<option class="c-select__select-option" value="key2" selected>
Option Three
</option>
<option class="c-select__select-option" value="key3" >
Option & Four
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div> <div class="c-select__expand-button" role="button" >
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556daf5">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556db33">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="682b32556da71-open-dropdown" data-js-placeholder="Placeholder in multi ">
Placeholder in multi
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<li class="c-select__option is-selected" data-js-dropdown-option="key" role="option" aria-selected="true" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556dbb0">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556dbf6">
</span>
<span class="c-select__option-label">Option One</span>
</li> <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556dc48">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556dc83">
</span>
<span class="c-select__option-label">Option Two</span>
</li> <li class="c-select__option is-selected" data-js-dropdown-option="key2" role="option" aria-selected="true" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556dcd3">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556dd0c">
</span>
<span class="c-select__option-label">Option Three</span>
</li> <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556dd5c">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556dd95">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_682b32556da71_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b32556dde3">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556de32">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556de6b">
</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="682b32556e2f8" data-uid="682b32556e2fe" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--md c-select--multiselect is-required" id="682b32556dedb" data-js-toggle-item="682b32556dedb-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="682b32556deed">
<label class="c-field__label" for="select_682b32556dedb">
Select Multiple Name
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_682b32556dedb" data-js-select-element="1" multiple="multiple" data-js-select-max="-1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element" tabindex="-1">
<option class="c-select__select-option" value="key" selected>
Option One
</option>
<option class="c-select__select-option" value="key1" >
Option Two
</option>
<option class="c-select__select-option" value="key2" selected>
Option Three
</option>
<option class="c-select__select-option" value="key3" >
Option & Four
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div> <div class="c-select__expand-button" role="button" >
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556df5b">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556df98">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="682b32556dedb-open-dropdown" data-js-placeholder="Placeholder in multi ">
Placeholder in multi
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<li class="c-select__option is-selected" data-js-dropdown-option="key" role="option" aria-selected="true" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e01a">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e057">
</span>
<span class="c-select__option-label">Option One</span>
</li> <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e0a8">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e0e1">
</span>
<span class="c-select__option-label">Option Two</span>
</li> <li class="c-select__option is-selected" data-js-dropdown-option="key2" role="option" aria-selected="true" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e130">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e169">
</span>
<span class="c-select__option-label">Option Three</span>
</li> <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e1b7">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e1ef">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_682b32556dedb_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b32556e23d">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e28c">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e2c6">
</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="682b32556e79a" data-uid="682b32556e7a0" method="GET" action="?q=select-single">
<div class="c-field c-select c-select--lg c-select--multiselect is-required" id="682b32556e32e" data-js-toggle-item="682b32556e32e-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="682b32556e340">
<label class="c-field__label" for="select_682b32556e32e">
Select Multiple Name
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_682b32556e32e" data-js-select-element="1" multiple="multiple" data-js-select-max="-1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element" tabindex="-1">
<option class="c-select__select-option" value="key" selected>
Option One
</option>
<option class="c-select__select-option" value="key1" >
Option Two
</option>
<option class="c-select__select-option" value="key2" selected>
Option Three
</option>
<option class="c-select__select-option" value="key3" >
Option & Four
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div> <div class="c-select__expand-button" role="button" >
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e3e1">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e427">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="682b32556e32e-open-dropdown" data-js-placeholder="Placeholder in multi ">
Placeholder in multi
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<li class="c-select__option is-selected" data-js-dropdown-option="key" role="option" aria-selected="true" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e4a7">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e4e4">
</span>
<span class="c-select__option-label">Option One</span>
</li> <li class="c-select__option " data-js-dropdown-option="key1" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e535">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e56f">
</span>
<span class="c-select__option-label">Option Two</span>
</li> <li class="c-select__option is-selected" data-js-dropdown-option="key2" role="option" aria-selected="true" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e5bf">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e5f9">
</span>
<span class="c-select__option-label">Option Three</span>
</li> <li class="c-select__option " data-js-dropdown-option="key3" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e648">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e681">
</span>
<span class="c-select__option-label">Option & Four</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_682b32556e32e_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b32556e6d3">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--check-box-outline-blank c-icon--material c-icon--material-check_box_outline_blank material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box_outline_blank" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e723">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--check-box c-icon--material c-icon--material-check_box material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_box" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b32556e75c">
</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>
@endforeachBlade component parameters
| Key | Default value | Type | Available values | Description |
| label | string | - | The placeholder of the dropdown | |
| placeholder | string | - | Supported if multiple select is enabled. | |
| id | false | boolean | - | The id attribute for the select component. Will be prefixed with "select_" |
| description | string | - | Additional description or instructions. | |
| required | false | boolean | - | If the element should be required |
| options | [] | array | - | The options which can be selected. The key if the item will be used as value of the option and the value will be used as a label |
| errorMessage | false | boolean | - | - |
| preselected | false | boolean | - | Key of option to be preselected |
| multiple | false | boolean | - | Sets the select box to a multiple select |
| name | false | boolean | - | The name attribute for the select component |
| hideLabel | false | boolean | - | Hides the label |
| helperText | string | - | Adds a helping text, below the element. | |
| size | md | string | - | The size of the select component (sm, md, lg) |
| maxSelections | false | boolean | - | The maximum number of selections allowed. Will only be applied if "multiple" is true. |
| hidePlaceholder | false | boolean | - | Hides the placeholder but keeps the label |
| selectAttributeList | [] | array | - | Ann array with attributes that will be set on the actual select element. |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |