GrInputTag

The crosses of the chips live by a roving tabindex: there is exactly one button in the tab order, and the rest are reachable with the arrows. Before that twenty tags gave twenty-one Tab stops — the set was impossible to skip past.

The name of a button names its own tag (“Remove the tag vue”) rather than a faceless “Remove the tag”: on twenty identical buttons there is otherwise no way to choose the right one.

The set of chips is declared a list (role="list" / listitem), so a screen reader reports the number of tags. The container of the list is display: contents: the role is needed for the semantics, it does not touch the layout, and the chips wrap in one flow with the field.

editable opens editing with a double click on a tag or with F2 from the keyboard. Before that a chip either existed or was removed as a whole: a typo in design-system-tokens-v2 cost retyping it in full.

F2, not Enter. A chip has a single focusable node — the removal button, and Enter on it already means “remove” by the native activation of a button. Hence the dependency as well: without tagClosable editing cannot be entered from the keyboard at all, and in dev the console warns about it.

The loss of focus saves. That is a deliberate divergence from addOnBlur (which is false by default): it decides whether a half-typed new value becomes a tag, and discarding is safe there — before that there was nothing. Editing, though, starts from an existing value, and quietly reverting what was typed is exactly the outcome that would surprise. There is a way to back out: Escape.

An empty value on Enter removes the tag, on the loss of focus it does not. Removal stays an explicit action: “erased the text and got distracted” must not cost a tag.

beforeAdd checks the edit as well. The prop is named after adding, but a tag has one rule, and a second predicate would diverge from the first; a rejection restores the previous value and is announced by a live region. There are no separators in editing: one edit is one tag, otherwise a comma would silently turn a tile into three.

max does not limit editing — the set does not grow from it.

Inside GrModal and the other layers Escape cancels the edit and does not close the window: the editing session is registered in the shared stack of layers.

max no longer blocks the field. It used to give the input a disabled at the limit: it dropped out of the tab order and stopped accepting Backspace — the only way to remove a tag from the keyboard. Now the field stays alive, extra tags simply are not added, and the exhaustion of the limit is announced by a live region.

Adding and removing a tag are announced as well: without that a change of the set looked to a blind user like “nothing happened”. All four announcements go into the shared live region of the package — announcer.md; the component no longer has a role="status" of its own.

<GrInputTag
  v-model="emails"
  :before-add="tag => /.+@.+\..+/.test(tag)"
  @reject="showError"
/>

beforeAdd may be asynchronous (a check on the server) — for the duration of the check a spinner and aria-busy are raised. A second Enter cancels the previous check: the result of the stale one is not appended. A rejected tag leaves in the reject event, so that the consumer can explain the reason.

clearable adds a “remove all” button (visible only when there are tags and the field is editable) and a clear event. loading is the same spinner an asynchronous beforeAdd raises, but under manual control.

focus(), blur(), clear() through a ref on the component.

state="success" and "warning" show an icon and a hidden label that goes into the aria-describedby of the control: the colour of the border as the only carrier of meaning is WCAG 1.4.1, and these two states have no ARIA equivalent of aria-invalid. danger gets no icon — its meaning is already carried by aria-invalid and the error text from GrFormField — and the mark goes out as soon as the control is declared invalid.

size is read from GrConfigProvider (the global size or a pointed componentDefaults), and clearable has been moved there as well. A blocked field is dimmed with the --gr-muted background and --gr-muted-fg text rather than with transparency: opacity dilutes tokens tuned to AA. The cross of a chip inherits the colour of the badge tone at full strength — dimming it with transparency is not allowed, on a dark chip the contrast fails.

The slots put an icon, a unit or a label into the shell; the width is bounded by six props (prefixMinWidth/prefixMaxWidth/prefixFixed and the same for the suffix). The shared contract of the controls — form-controls.md.

The slot draws the contents of the chip: the label, an icon, a counter. The chip itself (GrChip), its tone and the remove button stay with the component — a chip of your own with a cross inside the slot would give a chip within a chip and two crosses. remove in the slot props is for your own actions inside the label, not for a second remove button.

<template>
  <GrInputTag v-model="emails">
    <template #tag="{ tag }">
      <span class="font-500">{{ tag.split('@')[0] }}</span>
      <span class="text-[var(--gr-muted-fg)]">@{{ tag.split('@')[1] }}</span>
    </template>
  </GrInputTag>
</template>

The name prop renders an input[type="hidden"] per tag — the standard serialisation of a set with a repeated key; an empty set sends nothing.