1.0.3 • Published 4 years ago
Share package 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-selectParent Select container element mdf-select__buttonChild / Parent Select button element that activates the menu mdf-select__labelChild Select label element mdf-select__label--floatingModifier Moves the label above the button mdf-select__textChild Select text element mdf-select__iconChild Select arrow icon element mdf-select__inputChild Select hidden input element, holds the selected value mdf-list__item--selectedModifier Marks the list item as selected
Events Name Data Description MDFSelect:openednullFires 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:closednullFires when the select menu closes
Properties Name Type Description .containerHTMLElementReturns the select container element .itemsHTMLElement[]Returns an Array holding all menu items .menuHTMLElementReturns the menu element .textstringGet or set the select button text .valuestringGet or set the select hidden input value .isActive()(): booleanReturns wether or not the menu is currently visible .getSelectedElem()(): HTMLElementReturns the currently selected item .setSelectedElem(elem)(HTMLElement): voidSet the given element as selected