TagGroup

A group of tags, which the user can select and remove.

Categories

Selected: Travel.

<script>
  import { $bind, $signal } from 'brumate/signals';
  import Button from '@brumate/ui/Button.brm';
  import Label from '@brumate/ui/Label.brm';
  import Tag from '@brumate/ui/Tag.brm';
  import TagGroup from '@brumate/ui/TagGroup.brm';
  import TagList from '@brumate/ui/TagList.brm';
  import type { Key } from '@brumate/ui/collection.ts';

  let tags = $signal(['News', 'Travel', 'Gaming', 'Shopping', 'Music']);
  let picked = $signal<Key[]>(['Travel']);
</script>

<TagGroup
  class="ui-field"
  selectionMode="multiple"
  selectedKeys=$bind(picked)
  onRemove=((keys) => (tags = tags.filter((tag) => !keys.includes(tag))))
>
  <Label>Categories</Label>
  <TagList class="ui-taglist">
    #for (tag of tags by tag) {
      <Tag id=tag class="ui-tag">{tag}<Button slot="remove" class="ui-tag-remove">×</Button></Tag>
    }
  </TagList>
</TagGroup>
<p>Selected: {picked.join(', ') || 'none'}.</p>

<TagGroup selectionMode="multiple" onRemove=((keys) => remove(keys))>
  <Label>Categories</Label>
  <TagList>
    #for (tag of tags by tag) {
      <Tag id=tag>{tag}<Button slot="remove">×</Button></Tag>
    }
  </TagList>
</TagGroup>

A TagGroup holds a Label, a TagList with Tag elements, and can hold a Text with slot="description", which describes the list.
selectionMode is none, the default, single or multiple. A press and Space toggle a tag. selectedKeys is the list of the keys of the selected tags, and binds with $bind. See State.
disabledKeys, or isDisabled on a Tag, keeps tags from focus, selection and removal.

Removing

With onRemove, the group can remove tags. It gets the keys, and the caller removes them from its list.

Delete and Backspace remove the tag that has focus, or all the selected tags when it is one of them. Focus moves to the next tag, or to the list when no tag that can take focus stays.
A Button with slot="remove" in a tag removes that tag. It is out of the order of Tab, and its label names the tag.
Focus moves to the next tag, or to the one before when it was the last.

Keyboard

Tab stops at the list once, at the tag that had focus last, or else the first one.
The arrow keys move to the next and the previous tag, and Home and End go to the ends. Right to left, Left and Right turn around.

Removing

Keyboard

Tags