Addable tag list

AddableTagList is a reveal-on-click field for building a list of removable text tags. Click Add, type a value, press Enter — it becomes a removable Tag. Pass a suggestions set and it upgrades to a filtering combobox; omit it and it is a plain text input. It is the single successor API to the older AddableTextList (plain) and AddableComboList (suggestion-backed) per ADR-003.

Use it for

• Free-form tag or keyword entry (anti-messages, aliases, labels)
• Suggestion-backed entry where users pick from a known set but can also add their own
• A bounded list of short string values that each need a remove affordance

Import

import { AddableTagList } from '@brikdesigns/bds';

Variants

Plain

Without suggestions, it is a plain text input — Enter commits the value, Backspace on an empty input removes the last tag.

const [msgs, setMsgs] = useState<string[]>([]);

<AddableTagList label="Anti-messages" values={msgs} onChange={setMsgs} />

Suggestion combobox

Pass suggestions and typing filters the list; Enter commits the highlighted suggestion or a free-form value. Add strict to reject anything not in the set.

<AddableTagList
  label="Services offered"
  values={services}
  onChange={setServices}
  suggestions={getIndustryServices(industrySlug)}
  placeholder="Search or add a service…"
/>

Constraints

maxItems hides the input once the limit is reached; allowDuplicates (default false) permits case-insensitive repeats; disabled renders the tags as read-only chips with no controls.

<AddableTagList values={tags} onChange={setTags} maxItems={5} />
<AddableTagList values={tags} onChange={setTags} disabled />

When not to use

• Don't use it for structured rows. Key/value or multi-field entries are AddableFieldRowList or AddableEntryList.

Accessibility

• In suggestion mode the input is a role="combobox" with aria-expanded, aria-controls, and aria-activedescendant wired to the role="listbox" dropdown.
• Each committed value is a removable Tag with an accessible remove label (default "Remove").
• Strict-mode rejections announce via an aria-live="polite" hint.

API

Related

• AddableTextList — the plain-text predecessor this consolidates
• AddableComboList — the suggestion-backed predecessor this consolidates
• AddableEntryList — multi-field rows, not single tags
• MultiSelect — picking from a fixed set with no free-form entry
• Tag — the removable chip each value renders as
• Storybook playground