Selects

Selects show a set of options the user can choose one from.
Serves as an alternative to the native <select> element.
Requires the List and Menu modules.

HTML

<div class="mdf-select">
    <button class="mdf-select__button" aria-haspopup="listbox" aria-labelledby="select-label select-text">
        <span id="select-label" class="mdf-select__label">Select</span>
        <span id="select-text" class="mdf-select__text"></span>

        <span class="mdf-select__icon">
            <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
                <use href="icons.svg#arrow-keyboard"></use>
            </svg>
        </span>
    </button>

    <div class="mdf-select__menu mdf-menu">
        <ul class="mdf-list" role="listbox" aria-labelledby="select-label" tabindex="-1">
            <li class="mdf-list__item mdf-list__item--selected" role="option" data-value="1">Option 1</li>
            <li class="mdf-list__item" role="option" data-value="2">Option 2</li>
            <li class="mdf-list__item" role="option" data-value="3">Option 3</li>
        </ul>

        <input class="mdf-select__input" type="hidden" name="option" />
    </div>
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/select/styles';

// Configure appearance
@use '@miraidesigns/select' with (
    $variable: value
);

@include select.styles();

TypeScript

import { MDFSelect } from '@miraidesigns/select';

new MDFSelect(document.querySelector('.mdf-select'));

Attributes

Please see the WAI-ARIA page for attributes and best practices regarding listboxes.

| Name | Element | Description | | ------------ | ------- | ------------------------------------------------------------------------- | | data-value | <li> | The option's value, equivalent to a native <option value=""> attribute. |

Classes

| Name | Type | Description | | ----------------------------- | -------------- | ----------------------------------------------------- | | mdf-select | Parent | Select container element | | mdf-select__button | Child / Parent | Select button element that activates the menu | | mdf-select__label | Child | Select label element | | mdf-select__label--floating | Modifier | Moves the label above the button | | mdf-select__text | Child | Select text element | | mdf-select__icon | Child | Select arrow icon element | | mdf-select__input | Child | Select hidden input element, holds the selected value | | mdf-list__item--selected | Modifier | Marks the list item as selected |

Events

| Name | Data | Description | | ------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | MDFSelect:opened | null | Fires when the select menu opens | | MDFSelect:changed | {item: HTMLElement, text: string, value: string} | Fires whenever the active select item changes. Includes the item itself, its text and input value | | MDFSelect:closed | null | Fires when the select menu closes |

Properties

| Name | Type | Description | | ------------------------ | --------------------- | --------------------------------------------------- | | .container | HTMLElement | Returns the select container element | | .items | HTMLElement[] | Returns an Array holding all menu items | | .menu | HTMLElement | Returns the menu element | | .text | string | Get or set the select button text | | .value | string | Get or set the select hidden input value | | .isActive() | (): boolean | Returns wether or not the menu is currently visible | | .getSelectedElem() | (): HTMLElement | Returns the currently selected item | | .setSelectedElem(elem) | (HTMLElement): void | Set the given element as selected |