Skip to content

Dropdown Select13.10.5

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


$ npm i @if-design-system/dropdown-select@13.10.5

Edit this section

Overview

The Dropdown Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.

Edit this section

Usage

Use the Dropdown Select component when:

  • Displaying all options will draw user's attention
  • It is not encouraged for users to change the default option
  • A large number of familiar options are available
  • You have more than 7 options

See Patterns/Selection controls for more information regarding when to use selection controls.

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>
Edit this section

Behaviours

Interactions

Focused
Invalid
Ett valideringsfel
Invalid with error message

Modifiers

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

Anatomy

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>

No selection made

No selection made
  1. Placeholder

Selected

Selected
  1. Selected item
Edit this section

Specs

Edit this section

Implementation

<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>
Edit this section

Contact us