Back to Dropdown Select-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

The Dropdown Select component allow users to select one option from a temporary modal menu.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/dropdown-select@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

<form autocomplete="off" action="">
  <div class="if input-wrapper">
    <select class="if dropdown-select" id="<identifier>" name="<identifier>">
      <option value="" disabled hidden>Välj våningar</option>
      <option value="1">1 våning</option>
      <option value="2" selected>2 våningar</option>
      <option value="3">3 våningar</option>
    </select>
    <label class="if" for="<identifier>">Välj antal våningar</label>
  </div>
</form>

Placeholder

To create a placeholder for the select box, instead of using the first item in the list, you can add an option with these attributes:

<option value="" disabled selected hidden>Placeholder text</option>

Placeholder styling

To ensure that the unselected option that acts like a placeholder looks and feels like a placeholder, you need some javascript:

const dropdowns = document.querySelectorAll('select.if.dropdown-select');
const checkIfSelectIsNotSelected = dropdown => dropdown.value === '';
const setNotSelectedClass = dropdown => dropdown.classList.add('is-unselected');
const handleSelectChange = e => e.target.classList.remove('is-unselected');
dropdowns.forEach(dropdown => {
  if (checkIfSelectIsNotSelected(dropdown)) {
    setNotSelectedClass(dropdown);
  }
  dropdown.removeEventListener('change', handleSelectChange);
  dropdown.addEventListener('change', handleSelectChange);
});

This will ensure the correct placeholder styling for the Dropdown Component.

With help text

Hur många våningar har ditt hus?
Golvräkning kan påverka totalpriset
<form autocomplete="off" action="">
  <fieldset class="if">
    <legend class="if">Hur många våningar har ditt hus?</legend>
    <div class="if input-wrapper">
      <select class="if dropdown-select" id="<identifier>" name="<identifier>">
        <option value="" disabled hidden>Välj våningar</option>
        <option value="1">1 våning</option>
        <option value="2">2 våningar</option>
        <option value="3">3 våningar</option>
      </select>
      <label class="if" for="<identifier>">Välj antal våningar</label>
      <span class="if input-help">Golvräkning kan påverka totalpriset</span>
    </div>
  </fieldset>
</form>

Required

<select class="if dropdown-select" required></select>

Closed

<select class="if dropdown-select is-closed"></select>

Disabled

<select class="if dropdown-select" disabled></select>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.3 (2021-11-14)

Bug Fixes

  • 🐛 Added ifdesignsystem.min.css (815c2eb)

14.0.0 (2021-11-09)

Bug Fixes

  • 🐛 Fix import issue (792b0a8)
  • 🐛 Removed div arround select tag, added proper focus style (6f88950)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.10.2 (2021-10-07)

Bug Fixes

  • 🐛 Remove default width with data size mixin (2a5561a), closes #483471

13.6.3 (2021-09-17)

Bug Fixes

13.5.1 (2021-09-07)

Bug Fixes

13.2.0 (2021-09-01)

Features

13.0.0 (2021-08-25)

chore

  • 🤖 Removing IE11 support for dropdown-select (584aebe), closes #336127

BREAKING CHANGES

  • 🧨 We are removing IE11 support

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Use correct padding to prevent text overflow of icon (39c73ab)

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 The Dropdown Component is now renamed to Dropdown Select. Dropdown is a

pattern.

10.0.0 (2021-02-15)

Bug Fixes

  • 🐛 Fix placeholder styling, update documentation (0288527)

Code Refactoring

  • 💡 Rename form-group to input-wrapper (7ee3bae)

BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.36.0 (2020-10-12)

Features

  • 🎸 Add updated focus styling for dropdown (6beef59)

6.29.1 (2020-09-03)

Bug Fixes

  • 🐛 Don't display fields as invalid when they are required (db0e214)

6.22.0 (2020-07-01)

Bug Fixes

  • 🐛 Use correct colors for disabled states in input controls (a0862db)

Features

  • 🎸 Add new color categories, update documentation (5496822)

6.10.4 (2020-04-16)

Bug Fixes

  • 🐛 Use correct height for dropdowns (b50967e)

6.10.1 (2020-04-16)

Bug Fixes

  • 🐛 Fix validation messages for dropdowns (986896f), closes #240996

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.147 (2020-03-02)

Bug Fixes

  • 🐛 Set dropdown container width to be 100% (bc8fd25)

5.0.1-alpha.128 (2020-02-19)

Bug Fixes

  • 🐛 Use fallback font family on select box items (e5f3022)

5.0.1-alpha.125 (2020-02-18)

Bug Fixes

  • 🐛 Update design and add preprocessor files and test (f8a1caa)

5.0.1-alpha.120 (2020-02-17)

Bug Fixes

  • 🐛 Mixin usage for dropdown.styl (5655bd3)

5.0.1-alpha.110 (2020-01-21)

Bug Fixes

  • 🐛 Remove duplicate support color (a7f346d)
  • 🐛 Use a background color on the dropdown arrow (e99e05a)
  • 🐛 Use correct font-size for dropdowns (9ff1a09)

Bug Fixes

13.5.1 (2021-09-07)

Bug Fixes

13.2.0 (2021-09-01)

Features

13.0.0 (2021-08-25)

chore

  • 🤖 Removing IE11 support for dropdown-select (584aebe), closes #336127

BREAKING CHANGES

  • 🧨 We are removing IE11 support

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Use correct padding to prevent text overflow of icon (39c73ab)

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 The Dropdown Component is now renamed to Dropdown Select. Dropdown is a

pattern.

10.0.0 (2021-02-15)

Bug Fixes

  • 🐛 Fix placeholder styling, update documentation (0288527)

Code Refactoring

  • 💡 Rename form-group to input-wrapper (7ee3bae)

BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.36.0 (2020-10-12)

Features

  • 🎸 Add updated focus styling for dropdown (6beef59)

6.29.1 (2020-09-03)

Bug Fixes

  • 🐛 Don't display fields as invalid when they are required (db0e214)

6.22.0 (2020-07-01)

Bug Fixes

  • 🐛 Use correct colors for disabled states in input controls (a0862db)

Features

  • 🎸 Add new color categories, update documentation (5496822)

6.10.4 (2020-04-16)

Bug Fixes

  • 🐛 Use correct height for dropdowns (b50967e)

6.10.1 (2020-04-16)

Bug Fixes

  • 🐛 Fix validation messages for dropdowns (986896f), closes #240996

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.147 (2020-03-02)

Bug Fixes

  • 🐛 Set dropdown container width to be 100% (bc8fd25)

5.0.1-alpha.128 (2020-02-19)

Bug Fixes

  • 🐛 Use fallback font family on select box items (e5f3022)

5.0.1-alpha.125 (2020-02-18)

Bug Fixes

  • 🐛 Update design and add preprocessor files and test (f8a1caa)

5.0.1-alpha.120 (2020-02-17)

Bug Fixes

  • 🐛 Mixin usage for dropdown.styl (5655bd3)

5.0.1-alpha.110 (2020-01-21)

Bug Fixes

  • 🐛 Remove duplicate support color (a7f346d)
  • 🐛 Use a background color on the dropdown arrow (e99e05a)
  • 🐛 Use correct font-size for dropdowns (9ff1a09)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • 🐛 Use package-based imports (6822233)

5.0.1-alpha.63 (2019-11-25)

Bug Fixes

  • 🐛 Use appearance textfield instead of menulist (1e06d7a)

5.0.1-alpha.58 (2019-11-22)

Features

  • 🎸 Remove normalize.css (2c23c2b)

5.0.1-alpha.44 (2019-11-08)

Features

  • 🎸 Add support colors, replace hardcoded rgb to variables (32a2b9e)

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

  • 🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.27 (2019-10-29)

Features

Edit this section, Opens in new window
Contact us, Opens in new window