<div class="select--light">
<div class="select__wrapper">
<select class="select__select" id="select" name="select">
<option value="" disabled selected>Please choose</option>
<option value="Long long option Long long option Long long option Long long option Long long option Long long option Long long option Long long option">Long long option Long long option Long long option Long long option Long long option Long long option Long long option Long long option</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
<option value="option 5">option 5</option>
<option value="option 6">option 6</option>
<option value="option 7">option 7</option>
<option value="option 8">option 8</option>
<option value="option 9">option 9</option>
<option value="option 10">option 10</option>
<option value="option 11">option 11</option>
<option value="option 12">option 12</option>
<option value="option 13">option 13</option>
<option value="option 14">option 14</option>
<option value="option 15">option 15</option>
</select>
<label class="select__label" for="select">Text</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<div class="select__error">Please provide a value for this field</div>
</div>
<div class="select--{{splitDashLast _self.name}}">
<div class="select__wrapper">
<select class="select__select" id="{{id}}" name="{{name}}"{{#if disabled}} disabled{{/if}} {{#if required }}required="true"{{/if}}>
{{#unless selected}}
<option value="" disabled selected>Please choose</option>
{{/unless}}
{{#each options}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
{{#if label}}
<label class="select__label" for="{{id}}">{{label}}</label>
{{/if}}
</div>
{{#if helper}}
<div class="select__helper">{{helper}}</div>
{{/if}}
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
{{#if error}}
<div class="select__error">{{error}}</div>
{{else}}
<!--<div class="select__error">Put in the error message here...</div>-->
{{/if}}
</div>
{
"id": "select",
"name": "select",
"label": "Text",
"required": false,
"disabled": false,
"selected": false,
"options": [
"Long long option Long long option Long long option Long long option Long long option Long long option Long long option Long long option",
"option 2",
"option 3",
"option 4",
"option 5",
"option 6",
"option 7",
"option 8",
"option 9",
"option 10",
"option 11",
"option 12",
"option 13",
"option 14",
"option 15"
],
"error": "Please provide a value for this field",
"helper": ""
}
export * from '../select-material-like/select-material-like-bundle';
import './select-material-like-indent.scss'; // override SCSS from above
export * from '../select-material-like/select-material-like';
@import "~shared/base";
/*******************************************************************************
* Contextual classes:
* - is-disabled: When input is disabled
* - is-filled-in: When a value is available or the user clicked on the select
* - is-open: If the dropdown is open
* - has-no-label: If the select has no label
* - is-tabbed: When the select is focused (a11y)
* - is-focused: When the input is focused
* - is-initialized: When the JS for the component is initialized
* - has-no-label: If there is no label available
******************************************************************************/
// sizes
$selectPaddingX: 10px;
$selectDropdownOptionPaddingX: 10px;
// Need to use string here due to:
// https://github.com/webpack-contrib/sass-loader/issues/487
$variants: "dark", "light";
@each $color in $variants {
/*****************************************************************************
* General
****************************************************************************/
.select {
$block: &;
&--#{unquote($color)} {
/*************************************************************************
* Native select
************************************************************************/
#{$block}__select {
&,
&:invalid,
&:required {
padding-left: $selectPaddingX;
}
}
/*************************************************************************
* Label (will be moved to top when value available)
************************************************************************/
#{$block}__label {
padding-left: $selectPaddingX;
padding-right: $selectPaddingX;
}
/*************************************************************************
* Dropdown
************************************************************************/
#{$block}__dropdown-option {
padding-left: $selectDropdownOptionPaddingX;
padding-right: $selectDropdownOptionPaddingX;
}
/*************************************************************************
* Error & Helper
************************************************************************/
#{$block}__error,
#{$block}__helper {
margin-left: $selectPaddingX;
margin-right: $selectPaddingX;
}
}
}
}
This component is based on ‘select material like’ and inherits its behavior