Connection lost. Reconnecting… attempt 1 of 8
Paused. Your work is held on the server.
Could not reconnect.
This session has expired on the server.
DR.Simple_UI
Showing main. This can be ahead of the version your app has installed — check what a class says it needs before copying it. Releases

Chips

tier 2 — classes

A chip is a thing the user put there and can take away: an applied filter, a chosen recipient, a label attached to a record.

Chip or badge? Ask whether the user can remove it. If they put it there and can take it away, it is a chip. If it reflects data, it is a badge. Getting this the wrong way round gives a page of pills where nobody can tell which are interactive.

A set of filters

.chip-set wraps a row of them onto a second line. The remove button is a real <button> and needs a real name: × alone is announced as “times” and says nothing about what it removes, so write aria-label="Remove the region filter".

.chip--active is a filter that is on rather than one offered. .chip-dot carries a state inside the chip; colour it from a semantic token in the markup, because the class alone says nothing. A chip with no dismiss button drops the trailing room for one.

Region: EU-West Unpaid only Awaiting stock Last 7 days
<div class="chip-set">
    <span class="chip">
        <span class="chip-label">Region: EU-West</span>
        <button class="chip-dismiss" type="button" aria-label="Remove the region filter">
            <i class="ri-close-line"></i>
        </button>
    </span>
    <span class="chip chip--active">
        <i class="ri-filter-3-line"></i>
        <span class="chip-label">Unpaid only</span>
        <button class="chip-dismiss" type="button" aria-label="Remove the unpaid filter">
            <i class="ri-close-line"></i>
        </button>
    </span>
    <span class="chip">
        <span class="chip-dot" style="background:var(--warn-solid)"></span>
        <span class="chip-label">Awaiting stock</span>
    </span>
    <span class="chip"><span class="chip-label">Last 7 days</span></span>
</div>

What is applied, under the toolbar

A chip's home. The toolbar holds the controls that change the filter; the chip row below it says what is currently applied and gives each one a way off. Both are needed — a filter only a control remembers is one the reader forgets is on.

Every chip here is .chip--active, because each one is a filter that is on rather than one being offered. Name the remove button after the value it removes.

18 of 128
Pending EU-West Over 48 h old 
<div>
    <div class="toolbar">
        <div class="toolbar-filters">
            <input class="form-input toolbar-input" type="search" placeholder="Search orders…" />
            <select class="form-input toolbar-input" aria-label="Region">
                <option selected>EU-West</option>
                <option>EU-Central</option>
            </select>
        </div>
        <span class="toolbar-count">18 of 128</span>
    </div>
    <div class="chip-set" style="margin-top:10px">
        <span class="chip chip--active">
            <span class="chip-dot" style="background:var(--warn-solid)"></span>
            <span class="chip-label">Pending</span>
            <button class="chip-dismiss" type="button" aria-label="Stop filtering by Pending">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <span class="chip chip--active">
            <span class="chip-label">EU-West</span>
            <button class="chip-dismiss" type="button" aria-label="Stop filtering by EU-West">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <span class="chip chip--active">
            <span class="chip-label">Over 48 h old</span>
            <button class="chip-dismiss" type="button" aria-label="Stop filtering by age">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <button class="btn btn-sm btn-ghost" type="button">Clear all</button>
    </div>
</div>

Chosen people, in a field

A chip can hold an .avatar as well as a label, which is what makes a recipient field readable at a glance. .avatar-sm is the size that fits inside the small tier; .avatar--muted marks an actor that is not a person.

The input goes after the chips, not inside them. A field whose value is a set of chips still needs one real labelled control for adding to it.

AF Alex Fischer RN Rin Nakamura Fulfilment on call

Everyone here is told when the order is dispatched.

<div class="form-field" style="max-width:460px">
    <label class="form-label" for="chip-to">Notify</label>
    <div class="chip-set">
        <span class="chip">
            <span class="avatar avatar-sm">AF</span>
            <span class="chip-label">Alex Fischer</span>
            <button class="chip-dismiss" type="button" aria-label="Do not notify Alex Fischer">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <span class="chip">
            <span class="avatar avatar-sm">RN</span>
            <span class="chip-label">Rin Nakamura</span>
            <button class="chip-dismiss" type="button" aria-label="Do not notify Rin Nakamura">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <span class="chip">
            <span class="avatar avatar-sm avatar--muted"><i class="ri-group-line"></i></span>
            <span class="chip-label">Fulfilment on call</span>
            <button class="chip-dismiss" type="button" aria-label="Do not notify Fulfilment on call">
                <i class="ri-close-line"></i>
            </button>
        </span>
    </div>
    <input class="form-input" id="chip-to" type="text" placeholder="Add a person or a group…" />
    <p class="form-hint">Everyone here is told when the order is dispatched.</p>
</div>

Two sizes

A chip is interactive, so it takes the control heights rather than a type scale. The default is the small tier, because a chip's home is a filter bar beside a .btn-sm. .chip-lg is the normal tier, for a chip beside a full-size button.

Region: EU-West
Region: EU-West 
<div class="dr-col dr-gap-2">
    <div class="dr-row-wrap">
        <span class="chip">
            <span class="chip-label">Region: EU-West</span>
            <button class="chip-dismiss" type="button" aria-label="Remove the region filter">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <button class="btn btn-sm">Clear all</button>
    </div>
    <div class="dr-row-wrap">
        <span class="chip chip-lg">
            <span class="chip-label">Region: EU-West</span>
            <button class="chip-dismiss" type="button" aria-label="Remove the region filter">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <button class="btn">Clear all</button>
    </div>
</div>