<div class="select--dark">
<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>
<div class="select__helper">Please note that this form field has a helper text</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="select__error">Put in the error message here...</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": "",
"helper": "Please note that this form field has a helper text"
}
export * from '../select-material-like/select-material-like-bundle';
import './select-lite-arrow.scss'; // override above imported SCSS
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
$selectHeight: 2.375rem; // 38px + 12px == 50px height
// font settings
$selectPaddingX: 0;
$selectArrowFontSize: .625rem;
// 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)} {
#{$block}__wrapper {
@include form-components-icons-after("arrow-down-lite");
&:after {
font-size: $selectArrowFontSize;
line-height: $selectHeight;
}
}
/*************************************************************************
* Native select
************************************************************************/
#{$block}__select {
&,
&:invalid,
&:required {
padding-right: calc(#{$selectPaddingX} + #{$selectArrowFontSize} + 10px);
}
}
}
}
}
This component is based on ‘select material like’ and inherits its behavior