TagGroup

Removable Tags

Tags with a remove button. Click the remove icon on any tag to remove it from the list.

const [tags, setTags] = createSignal(initialTags);

<TagGroup
  label="Frameworks"
  items={tags()}
  onRemove={(keys) => {
    setTags(prev => prev.filter(t => !keys.has(t.id)));
  }}
>
  {(item) => item.name}
</TagGroup>

Selectable Tags

Tags that can be selected to filter or categorize content. Single selection mode allows picking one category.

<TagGroup
  label="Category"
  items={categories}
  selectionMode="single"
  selectedKeys={selectedKeys()}
  onSelectionChange={setSelectedKeys}
>
  {(item) => item.name}
</TagGroup>

Multi-Select Tags

Multiple tags can be selected simultaneously for filtering by multiple criteria.

<TagGroup
  label="Status Filter"
  items={statuses}
  selectionMode="multiple"
  selectedKeys={multiSelected()}
  onSelectionChange={setMultiSelected}
>
  {(item) => item.name}
</TagGroup>

Variants

Tags support different visual styles.

<TagGroup label="Default" items={tags} variant="default">{(item) => item.name}</TagGroup>
<TagGroup label="Outline" items={tags} variant="outline">{(item) => item.name}</TagGroup>
<TagGroup label="Solid" items={tags} variant="solid">{(item) => item.name}</TagGroup>

Sizes

Tags are available in different sizes.

<TagGroup label="Small" items={tags} size="sm">{(item) => item.name}</TagGroup>
<TagGroup label="Medium" items={tags} size="md">{(item) => item.name}</TagGroup>
<TagGroup label="Large" items={tags} size="lg">{(item) => item.name}</TagGroup>

Props

Accessibility