<div class="field-group">
<label for="select">Select</label>
<select id="select" class="a-select a-select--full-width" aria-describedby="select-help">
<option value="" disabled selected>Välj</option>
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
<div class="input-help" id="select-help">
Välj det som passar dig bäst
</div>
</div>
<div class="field-group{{#if is_invalid}} is-invalid{{/if}}">
{{> @label for="select" label="Select" labelClasses=""}}
<select id="{{id}}" {{#if is_invalid}}aria-invalid="true"{{/if}} {{#if required}}required{{/if}} {{#if disabled}}disabled{{/if}} class="a-select{{#if modifier}} {{modifier}}{{/if}}" {{#if has_help}} aria-describedby="select-help"{{/if}} {{#if required}} aria-describedby="select-help"{{/if}}>
{{#each options}}
<option value="{{value}}"{{#if is_disabled}} disabled{{/if}}{{#if is_selected}} selected{{/if}}>{{text}}</option>
{{/each}}
</select>
{{#if has_help}}
<div class="input-help" id="select-help">
Välj det som passar dig bäst
</div>
{{else if required}}
<div class="input-help" id="select-help">
Fältet är obligatoriskt
</div>
{{/if}}
</div>
{
"label": "Select",
"labelClasses": "is-required",
"id": "select",
"has_icon": true,
"modifier": "a-select--full-width",
"required": false,
"disabled": false,
"options": [
{
"value": "",
"text": "Välj",
"is_disabled": true,
"is_selected": true
},
{
"value": "value-1",
"text": "Option 1",
"is_disabled": false,
"is_selected": false
},
{
"value": "value-2",
"text": "Option 2",
"is_disabled": false,
"is_selected": false
},
{
"value": "value-3",
"text": "Option 3",
"is_disabled": false,
"is_selected": false
},
{
"value": "value-4",
"text": "Option 4",
"is_disabled": false,
"is_selected": false
}
],
"has_help": true
}
@charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@include mixin.atom(select) {
@extend %input;
width: auto;
padding-right: func.rhythm(5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: calc(100% - #{func.rhythm(1)}) 50%;
background-size: var.$icon-size-medium var.$icon-size-medium;
&:focus {
@extend %input-focus;
}
&::-ms-expand {
display: none;
}
+ .input-help {
width: auto;
}
@include bem.m(full-width) {
width: 100%;
+ .input-help {
width: 100%;
}
}
@include bem.m(discreet) {
@extend %discreet;
}
}
@include bem.b(select) {
@include bem.m(transparent) {
border-color: transparent;
background-color: transparent;
box-shadow: none;
}
}
Available modifier: select--transparent