@miraidesigns/chips v1.0.2

Chips

Chips are elements that represent small pieces of information like tags or inputs.

HTML

<div class="mdf-chips">
    <div class="mdf-chips__grid" role="grid">   
        <div class="mdf-chips__chip" role="row">
            <span role="gridcell">
                <span class="mdf-chips__text" tabindex="0">Some preview text</span>
            </span>
        </div>

        <div class="mdf-chips__chip" role="row">
            <span role="gridcell">
                <span class="mdf-chips__text" tabindex="0">Some other text</span>
            </span>
        </div>
    </div>
</div>

Sass

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

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

@include chips.styles();

Examples

Some basic examples on how the module can be used.

User Created Chips

Requires the Elements module for the mdf-icon class.\ Requires the Helpers module for the mdf-offscreen class.

<div class="mdf-chips mdf-chips--has-input">
    <div class="mdf-chips__grid" role="grid">   
        <div class="mdf-chips__chip" role="row">
            <span role="gridcell">
                <span class="mdf-chips__text" tabindex="0">Preview</span>
            </span>

            <span role="gridcell">
                <button class="mdf-chips__action" aria-label="Remove chip">
                    <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
                        <use href="icons.svg#cancel"></use>
                    </svg>
                </button>
            </span>
        </div>
    </div>

    <input class="mdf-chips__input" placeholder="Add new chip">

    <span class="mdf-offscreen" aria-live="polite"></span>
</div>

TypeScript

import { MDFChips } from '@miraidesigns/chips';

const chips = new MDFChips(document.querySelector('.mdf-chips'), {
    iconURL: 'icons.svg#cancel' // Make sure to set this URL correctly
});

// Get the chips container and text input elements.
const chipsContainer = chips.container;
const chipsInput = chips.input;

// Listen to keydown events on the text input.
chipsInput.addEventListener('keydown', (evt: KeyboardEvent) => {
    if (evt.key === 'Enter') {
        // Get the input value when the user hits `ENTER`.
        const input = evt.target as HTMLInputElement;
        const value = input.value;

        // Array of the existing chips values.
        const chipsValues = chips.getValues();

        // Make sure there is no existing chip with the same value.
        if (!chipsValues.includes(value)) {
            // Add the new chip.
            chips.addChip(value);

            // Clear out the text input.
            input.value = '';
        }
    }
});

// Event delegation on the chips container.
chipsContainer.addEventListener('click', (evt: MouseEvent) => {
    // Get the clicked element.
    const _this = evt.target as HTMLElement;

    // Only trigger when we click the `action` button.
    if (_this.matches('.mdf-chips__action')) {
        // Get the chip element it belongs to.
        const chip: HTMLElement = _this.closest('.mdf-chips__chip');

        // Delete the chip.
        chips.deleteChip(chip);
    }
});

Implementation

Attributes

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

Classes

Events

Properties

Options