Swegon Component Library

Select: Default 

<div class="form-item form-item--select ">
    <label for="select" class="form-item__label">
        Dropdown
    </label>
    <select id="select" class="select__select " name="Select">
        <option class="select__option" value="select">Option 1</option>
        <option class="select__option" value="select">Option 2</option>
    </select>
</div>
 
<div class="form-item form-item--select {{getmodifiers modifiers "form-item"}}">
    {{#if label}}
        <label for="{{id}}" class="form-item__label">
            {{label}}
            {{#if required}}
            *
            {{/if}}
        </label>
    {{/if}}
    <select id="{{id}}" class="select__select {{ additionalClasses }}"{{#if name}} name="{{name}}"{{/if}}{{#if disabled}} disabled{{/if}} {{#if required}}required{{/if}} {{{ getattributes attr }}}>
        {{#each options}}
            <option class="select__option" value="{{value}}" {{#if disabled}} disabled{{/if}} {{#if selected}} selected{{/if}}>{{name}}</option>
        {{/each}}
    </select>
    {{#if errorMsg}}
        <div class="form-item__error-msg">{{ errorMsg }}</div>
    {{/if}}
</div>
 
{
  "name": "Select",
  "label": "Dropdown",
  "id": "select",
  "options": [
    {
      "name": "Option 1",
      "value": "select"
    },
    {
      "name": "Option 2",
      "value": "select"
    }
  ]
}
  • Content: 
    %select {
    width: 100%;
    font-weight: bold;
    padding: size(1.5) size(6) size(1.5) size(2);
    background-color: $color-input-background;
    border: 1px solid $color-input-border;
    background-image: url('../../../assets/icons/icon-chevron-down.svg');
    background-size: size(2) size(2);
    background-repeat: no-repeat;
    background-position: calc(100% - #{size(2)}) center;
    border-radius: 0;
    margin-bottom: size(2);

    &::-ms-expand {
        display: none;
    }

    &[aria-invalid='true'], &.error {
        color: $color-input-color-error;
        background-color: $color-input-background-error;
        border-color: $color-input-border-error;

        &:before {
            border-color: $color-input-border-error;
        }
    }

    &:disabled {
        color: $color-input-color-disabled;
        &:before {
            border-color: $color-input-border-disabled;
        }
    }
}

.select__select {
    @extend %select;
}

.select__select--ghost {
    background-color: transparent;
    background-position: calc(100% + 2px) center;
    padding: size(1.25) size(2.5) size(1) 0;
    width: auto;
    border: none;
}
  • URL: /components/raw/select/select.scss
  • Filesystem Path: src/components/form/select/select.scss
  • Size: 1.2 KB

No notes defined.