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. |