Back to Dropdown Select-guidelines

CSS ComponentThe latest version of this package is: 16.0.28, 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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/dropdown-select@16.0.28
Preview

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 selected 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.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.5 (2022-02-24)

Bug Fixes

  • 🐛 Use correct font family for dropdown-select (28c0796) , closes #506306

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

14.3.0 (2022-02-09)

Bug Fixes

  • Use correct vars and mixins (f879b28)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

reinstall (885c74b)

14.0.3 (2021-11-14)

Bug Fixes

  • 🐛 Added ifdesignsystem.min.css (815c2eb) . ✅ Closes: 507732

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ 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!

Bug Fixes

  • 🐛 Fix import issue (792b0a8)

  • 🐛 Removed div arround select tag, added proper focus style (6f88950) . ✅ Closes: 485815

Documentation Updates

  • ✏️ Extracted out the CSS documentation for Dropdown Select (c55fe05) , closes #467386

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

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

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

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.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.5.1 (2021-09-07)

Bug Fixes

  • 🐛 Finalize data-size issue (f7f9f55) , closes #374144

  • 🐛 Update and fix data sizing for form elements (5fbefb4) , closes #374144

  • 🤖 Rearrange diffs for test, use grey color for unaffected (1834399)

  • continue to fix form input widths (b66977e)

  • 🤖 Use node v14 (4009973)

bootstrap (d23e139)

13.2.0 (2021-09-01)

Features

  • 🎸 dropdown-select (f85b886) , closes #461587 . Add input-help and input-error usage examples

  • 🤖 Use correct order for diff (cc6a4fd)

13.0.0 (2021-08-25)

⚠ BREAKING CHANGES

  • 🧨 We are removing IE11 support

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

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

12.12.1 (2021-08-10)

Bug Fixes

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

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • 🤖 Reinstall (e660696)

  • 🤖 Update published date (61e7ccf)

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)

⚠ 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.

Features

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

Code Refactoring

Documentation Updates

  • ✏️ Use correct title for Dropdown Select (7515aba)

Miscellaneous chores

  • 🤖 Add back missing styles for dropdown-select (f7938d8)

  • 🤖 Make sure we have correct deps set, and used (5d2e0fb)

  • 🤖 Reinstall (2c763ea)

  • 🤖 Reinstall (69e1a5b)

rebuild (7edb430)

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