Select

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

Select

error
expand_more

Plenty of select

Yes

<div class="c-select__container c-field">
        <label for="61efaf8a601f7" class="u-sr__only c-field__text--label">Select Name</label>
    
    <select id="61efaf8a601f7" class="c-select" required="required" data-required="1" data-uid="61efaf8a601f0">
                <option class="c-select__option"  value="">Select Name</option>
        

                    <option class="c-select__option" value="key" >Option One</option>
                    <option class="c-select__option" value="key1" >Option Two</option>
                    <option class="c-select__option" value="key2" selected>Option Three</option>
                    <option class="c-select__option" value="key3" >Option & Four</option>
        
        
    </select>

    <div id="error_input_61efaf8a601f7_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efaf8a6042f" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efaf8a60429">
                    error
            </i>
        <span class="errorText"></span>
    </div>

    <!-- icon.blade.php -->
    <i id="61efaf8a60487" class="c-icon c-select__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efaf8a60483">
                    expand_more
            </i>

</div>
@select([
    'label' => 'Select Name',
    'required' => true,
    'preselected' => 'key2',
    'options' => [
        'key'   => 'Option One',
        'key1'  => 'Option Two',
        'key2'  => 'Option Three',
        'key3'  => 'Option & Four',
    ]
])
@endselect

Multiple Select

error
expand_more

Plenty of select

Yes

<div class="c-select__container c-field">
        <label for="61efaf8a606fc" class="u-sr__only c-field__text--label">Select Multiple Name</label>
    
    <select id="61efaf8a606fc" class="c-select" multiple="multiple" required="required" data-required="1" data-uid="61efaf8a606f7">
                <option class="c-select__option"  value="">Select Multiple Name</option>
        

                    <option class="c-select__option" value="key" >Option One</option>
                    <option class="c-select__option" value="key1" >Option Two</option>
                    <option class="c-select__option" value="key2" selected>Option Three</option>
                    <option class="c-select__option" value="key3" >Option & Four</option>
        
        
    </select>

    <div id="error_input_61efaf8a606fc_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efaf8a60758" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efaf8a60754">
                    error
            </i>
        <span class="errorText"></span>
    </div>

    <!-- icon.blade.php -->
    <i id="61efaf8a607a1" class="c-icon c-select__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efaf8a6079d">
                    expand_more
            </i>

</div>
@select([
    'label' => 'Select Multiple Name',
    'required' => true,
    'preselected' => 'key2',
    'multiple' => true,
    'options' => [
        'key'   => 'Option One',
        'key1'  => 'Option Two',
        'key2'  => 'Option Three',
        'key3'  => 'Option & Four',
    ]
])
@endselect

Blade component parameters

Key Default value Type Available values Description
label string - The placeholder of the dropdown
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
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Select/select.json