Token Field — Cider UI

Selectors

.token-field: Container with data-token-field. Wraps tokens and an input.
.token: Individual removable token chip.
.token-blue: Blue variant for the token (Apple Mail recipient style).

Default

Design Photos

HTML

<div class="token-field" data-token-field>
  <span class="token">Design<button type="button" aria-label="Remove Design"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 9l6-6M9 9L3 3"/></svg></button></span>
  <span class="token">Photos<button type="button" aria-label="Remove Photos"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 9l6-6M9 9L3 3"/></svg></button></span>
  <input type="text" placeholder="Add tag..." />
</div>

Blue Tokens

alice@example.com bob@example.com

HTML

<div class="token-field" data-token-field data-token-class="token-blue">
  <span class="token token-blue">alice@example.com<button type="button" aria-label="Remove alice@example.com"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 9l6-6M9 9L3 3"/></svg></button></span>
  <span class="token token-blue">bob@example.com<button type="button" aria-label="Remove bob@example.com"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 9l6-6M9 9L3 3"/></svg></button></span>
  <input type="text" placeholder="Add recipient..." />
</div>

Empty

HTML

<div class="token-field" data-token-field>
  <input type="text" placeholder="Type and press Enter..." />
</div>

Disabled

Read-only

HTML

<div class="token-field" data-token-field>
  <span class="token">Read-only<button type="button" aria-label="Remove Read-only"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 9l6-6M9 9L3 3"/></svg></button></span>
  <input type="text" placeholder="Add tag..." disabled />
</div>

Usage

Include the token field JS to enable adding tokens with Enter or comma, and removing with Backspace or the × button.

<!-- npm -->
<script src="node_modules/ciderui/js/cider.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

Listen for the change event to react to token changes:

document.querySelector('[data-token-field]').addEventListener('change', (e) => {
  console.log(e.detail.tokens); // ["Design", "Photos"]
});

Accessibility

Enter or comma adds the current input as a token.
Backspace on an empty input removes the last token.
Each token's remove button has aria-label="Remove {text}" for screen readers.
A change event fires on the container with the updated token list.