Select

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

Select

Plenty of select

Yes

Notice: Undefined variable: size in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Select/Select.php on line 33

Select Name

Notice: Undefined variable: helperText in /tmp/blade-engine-cache/77b6461577ddd126c61385aaa7e5a01775543256.php on line 38

<br />
<b>Notice</b>:  Undefined variable: size in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Select/Select.php</b> on line <b>33</b><br />
<div id="62bed184cb925" class="c-select c-select--md c-field">
            <label for="62bed184cb925" class="c-field__label">Select Name</label>
        
    <div class="u-position--relative">
        <select required="required" data-required="1" data-uid="62bed184cb91f" id="select_62bed184cb925">
                        <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>
        <!-- icon.blade.php -->
    <i id="62bed184cbd33" class="c-icon c-select__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed184cbd2e">
                    expand_more
            </i>
    </div>

    <div id="error_input_62bed184cb925_message" class="c-select__select-invalid-message">
        <!-- icon.blade.php -->
    <i id="62bed184cbd92" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62bed184cbd8f">
                    error
            </i>
        <span class="errorText"></span>
    </div>
    <br />
<b>Notice</b>:  Undefined variable: helperText in <b>/tmp/blade-engine-cache/77b6461577ddd126c61385aaa7e5a01775543256.php</b> on line <b>38</b><br />
</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

Plenty of select

Yes

Notice: Undefined variable: size in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Select/Select.php on line 33

Select Multiple Name

Notice: Undefined variable: helperText in /tmp/blade-engine-cache/77b6461577ddd126c61385aaa7e5a01775543256.php on line 38

<br />
<b>Notice</b>:  Undefined variable: size in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Select/Select.php</b> on line <b>33</b><br />
<div id="62bed184cc358" class="c-select c-select--md c-field">
            <label for="62bed184cc358" class="c-field__label">Select Multiple Name</label>
        
    <div class="u-position--relative">
        <select multiple="multiple" required="required" data-required="1" data-uid="62bed184cc352" id="select_62bed184cc358">
                        <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>
        <!-- icon.blade.php -->
    <i id="62bed184cc532" class="c-icon c-select__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed184cc52d">
                    expand_more
            </i>
    </div>

    <div id="error_input_62bed184cc358_message" class="c-select__select-invalid-message">
        <!-- icon.blade.php -->
    <i id="62bed184cc570" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62bed184cc56d">
                    error
            </i>
        <span class="errorText"></span>
    </div>
    <br />
<b>Notice</b>:  Undefined variable: helperText in <b>/tmp/blade-engine-cache/77b6461577ddd126c61385aaa7e5a01775543256.php</b> on line <b>38</b><br />
</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