<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
}
  • Content:
    @charset 'UTF-8';
    
    @include atom(select) {
    	@extend %input;
    
    	width: auto;
    	padding-right: 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% - #{rhythm(1)}) 50%;
    	background-size: $icon-size-medium $icon-size-medium;
    
    	&:focus {
    		@extend %input-focus;
    	}
    
    	&::-ms-expand {
    		display: none;
    	}
    
    	+ .input-help {
    		width: auto;
    	}
    
    	@include m(full-width) {
    		width: 100%;
    
    		+ .input-help {
    			width: 100%;
    		}
    	}
    
    	@include m(discreet) {
    		@extend %discreet;
    	}
    }
    
    @include b(select) {
    	@include m(transparent) {
    		border-color: transparent;
    		background-color: transparent;
    		box-shadow: none;
    	}
    }
    
  • URL: /components/raw/select/_select.scss
  • Filesystem Path: src/atoms/select/_select.scss
  • Size: 882 Bytes

Select

Available modifier: select--transparent