TagSelect

Inline tag display with grouped popover selection

Overview

TagSelect displays selected items as inline removable tags within a clickable container. Clicking the container opens a popover for grouped selection. Hovering over a tag shows which group it belongs to. Ideal for scenarios where space is limited and selection context matters.

Key Features

Inline tags with × remove button
Hover tooltip shows group name
Click container to open selection popover
Collapsible groups with checkboxes
Search filtering across all items
Optional source (platform/program) indicators
Optional project badges on items

Interactive Examples

Basic Usage

Click the container to open the selection popover. Selected items appear as tags.

Selected: None

Pre-selected Tags

Tags show inside the container. Hover shows the group name. Click x to remove.

Selected: ios, android, highly-active

With Source Indicators

Shows platform/program badges in the popover and project source badges on items.

Selected: desktop, expert

Disabled State

When disabled, the container cannot be clicked and tags cannot be removed.

No Items Available

Shows an empty state when no groups or items are available.

No segments available

Interfaces

TaxonomySelectorGroup

Prop	Type	Description
`id`	`string`	Unique identifier for the group
`name`	`string`	Display name for the group header
`icon`	`IconDefinition?`	Optional icon for the group header
`source`	`'platform' \| 'program'?`	Source type for badge display
`items`	`TaxonomySelectorItem[]`	Array of selectable items within this group

TaxonomySelectorItem

Prop	Type	Description
`id`	`string`	Unique identifier for the item
`name`	`string`	Display name for the item
`sourceProjectId`	`string?`	Optional project ID for badge display
`sourceProjectName`	`string?`	Optional project name for badge display

Props Reference

Prop	Type	Default	Description
`groups`	`TaxonomySelectorGroup[]`	`required`	Array of groups containing selectable items
`selected`	`string[]`	`required`	Array of currently selected item IDs
`onChange`	`(selected: string[]) => void`	`required`	Callback when selection changes
`placeholder`	`string`	`-`	Override default placeholder text
`entityName`	`string`	`'items'`	Entity name for i18n (e.g., 'segments')
`showSourceIndicators`	`boolean`	`false`	Show platform/program badges in popover
`showProjectBadges`	`boolean`	`false`	Show project source badges on items
`currentProjectId`	`string \| null`	`-`	Current project ID for highlighting
`disabled`	`boolean`	`false`	Disable all interactions
`className`	`string`	`-`	Additional CSS classes for the container

Usage

import { TagSelect, type TaxonomySelectorGroup } from '@/ui/components';
import { faUsers, faGlobe } from '@fortawesome/duotone-regular-svg-icons';

// Define groups with their items
const groups: TaxonomySelectorGroup[] = [
  {
    id: 'geographic',
    name: 'Geographic',
    icon: faGlobe,
    source: 'platform',
    items: [
      { id: 'north-america', name: 'North America' },
      { id: 'europe', name: 'Europe' },
    ],
  },
  {
    id: 'engagement',
    name: 'Engagement',
    icon: faUsers,
    source: 'program',
    items: [
      { id: 'highly-active', name: 'Highly Active' },
      { id: 'regular', name: 'Regular' },
    ],
  },
];

// Usage in component
const [selected, setSelected] = useState<string[]>([]);

<TagSelect
  groups={groups}
  selected={selected}
  onChange={setSelected}
  entityName="segments"
/>

Prop

Type

Description

id

string

Unique identifier for the group

name

string

Display name for the group header

icon

IconDefinition?

Optional icon for the group header

source

'platform' | 'program'?

Source type for badge display

items

TaxonomySelectorItem[]

Array of selectable items within this group

Prop

Type

Description

id

string

Unique identifier for the item

name

string

Display name for the item

sourceProjectId

string?

Optional project ID for badge display

sourceProjectName

string?

Optional project name for badge display

Prop

Type

Default

Description

groups

TaxonomySelectorGroup[]

required

Array of groups containing selectable items

selected

string[]

required

Array of currently selected item IDs

onChange

(selected: string[]) => void

required

Callback when selection changes

placeholder

string

-

Override default placeholder text

entityName

string

'items'

Entity name for i18n (e.g., 'segments')

showSourceIndicators

boolean

false

Show platform/program badges in popover

showProjectBadges

boolean

false

Show project source badges on items

currentProjectId

string | null

-

Current project ID for highlighting

disabled

boolean

false

Disable all interactions

className

string

-

Additional CSS classes for the container

import { TagSelect, type TaxonomySelectorGroup } from '@/ui/components'; import { faUsers, faGlobe } from '@fortawesome/duotone-regular-svg-icons'; // Define groups with their items const groups: TaxonomySelectorGroup[] = [ { id: 'geographic', name: 'Geographic', icon: faGlobe, source: 'platform', items: [ { id: 'north-america', name: 'North America' }, { id: 'europe', name: 'Europe' }, ], }, { id: 'engagement', name: 'Engagement', icon: faUsers, source: 'program', items: [ { id: 'highly-active', name: 'Highly Active' }, { id: 'regular', name: 'Regular' }, ], }, ]; // Usage in component const [selected, setSelected] = useState<string[]>([]); <TagSelect groups={groups} selected={selected} onChange={setSelected} entityName="segments" />