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: helperText in /tmp/blade-engine-cache/77b6461577ddd126c61385aaa7e5a01775543256.php on line 54
<div class="c-select c-select--md c-field">
            <label class="c-field__label " for="select_">Select Name
                            <span class="u-color__text--danger">*</span>
                    </label>
    
    
    <div class="u-position--relative">
        <select id="select_647e41263cc31" required="required" data-required="1" data-uid="647e41263cc44">
                            <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 class="c-select_focus-styler u-level-top"></div>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-icons c-icon--size-md" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e41263d241">
        <span data-nosnippet aria-hidden="true">
                            expand_more
                    </span>
        </span>
    </div>

    <div class="c-select__select-invalid-message" id="error_input__message">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-icons c-icon--size-sm" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e41263d2f1">
        <span data-nosnippet aria-hidden="true">
                            error
                    </span>
        </span>
        <span class="errorText"></span>
    </div>
    <br />
<b>Notice</b>:  Undefined variable: helperText in <b>/tmp/blade-engine-cache/77b6461577ddd126c61385aaa7e5a01775543256.php</b> on line <b>54</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: helperText in /tmp/blade-engine-cache/77b6461577ddd126c61385aaa7e5a01775543256.php on line 54
<div class="c-select c-select--md c-field">
            <label class="c-field__label " for="select_">Select Multiple Name
                            <span class="u-color__text--danger">*</span>
                    </label>
    
    
    <div class="u-position--relative">
        <select id="select_647e41263d540" multiple="multiple" required="required" data-required="1" data-uid="647e41263d54b">
                            <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 class="c-select_focus-styler u-level-top"></div>
        <!-- icon.blade.php -->
    <span class="c-icon c-select__icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-icons c-icon--size-md" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e41263d5b6">
        <span data-nosnippet aria-hidden="true">
                            expand_more
                    </span>
        </span>
    </div>

    <div class="c-select__select-invalid-message" id="error_input__message">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-icons c-icon--size-sm" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e41263d603">
        <span data-nosnippet aria-hidden="true">
                            error
                    </span>
        </span>
        <span class="errorText"></span>
    </div>
    <br />
<b>Notice</b>:  Undefined variable: helperText in <b>/tmp/blade-engine-cache/77b6461577ddd126c61385aaa7e5a01775543256.php</b> on line <b>54</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
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
size md string - The size of the select component (sm, md, lg)
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