# TagManager

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/tagManager
*Captured:* 2026-04-27T14:58:35.193Z

The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.

## TagManager

**Without adding custom tag option**

**In Combination with state component**

### Example: Example 1

Type in new fleet group name above
Choose existing fleet group
Lorem
Ipsum
Dolor sit amet
Connectivity Test

Foo

Bar

Save

#### React (tsx)

```tsx
import { useState } from 'react';
import { isEmpty } from 'es-toolkit/compat';

import TagManager from '@rio-cloud/rio-uikit/TagManager';
import Button from '@rio-cloud/rio-uikit/Button';
import type { TagManagerTag } from '../@rio-cloud/rio-uikit';

const tagListSuggestions: TagManagerTag[] = [
    { label: 'Lorem' },
    { label: 'Ipsum' },
    { label: 'Dolor sit amet' },
    { label: 'Connectivity Test' },
];

const existingTags: TagManagerTag[] = [{ label: 'Foo' }, { label: 'Bar' }];

export default () => {
    const [tagList, setTagList] = useState(existingTags);
    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);

    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);

    const handleSave = () => {
        const updatedTagList = unsavedTags
            .filter(tag => !tag.toRemove)
            .map(tag => {
                delete tag.toAdd;
                return tag;
            });

        setTagList(updatedTagList);
        setUnsavedTags([]);
    };

    return (
        <div className='row'>
            <div className='col-ls-6 col-lg-4'>
                <TagManager
                    tagList={tagList}
                    onTagListChange={handleTagListChange}
                    tagSuggestions={tagListSuggestions}
                    placeholder='Search fleet group or create new'
                    customTagPlaceholder='Type in new fleet group name above'
                    dropdownSeparatorText='Choose existing fleet group'
                />
                <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>
                    Save
                </Button>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="row">
    <div class="col-ls-6 col-lg-4">
        <div class="TagManager">
            <div class="AutoSuggest dropdown margin-bottom-10">
                <div class="ClearableInput input-group">
                    <input placeholder="Search fleet group or create new" class="form-control" autocomplete="off" type="text" tabindex="1" value="">
                    <span class="clearButton hide">
                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                        </span>
                    </span>
                </div>
                <ul role="menu" class="dropdown-menu">
                    <li role="presentation" class="disabled" data-item-index="0">
                        <a role="menuitem">
                            <span class="display-flex align-items-center padding-top-5 padding-bottom-5 text-color-gray">
                                <span class="margin-left--5 margin-right-5 margin-top--1 rioglyph rioglyph-arrow-up">
                                </span>
                                <span class="text-italic">Type in new fleet group name above</span>
                            </span>
                        </a>
                    </li>
                    <li class="dropdown-header center ">
                        <span class="dropdown-header-text">Choose existing fleet group</span>
                    </li>
                    <li role="presentation" class="" data-item-index="2">
                        <a role="menuitem">Lorem</a>
                    </li>
                    <li role="presentation" class="" data-item-index="3">
                        <a role="menuitem">Ipsum</a>
                    </li>
                    <li role="presentation" class="" data-item-index="4">
                        <a role="menuitem">Dolor sit amet</a>
                    </li>
                    <li role="presentation" class="" data-item-index="5">
                        <a role="menuitem">Connectivity Test</a>
                    </li>
                </ul>
            </div>
            <div class="taglist taglist-autowidth taglist-vertical">
                <div class="tag deletable clickable rioglyph rioglyph-remove rounded">
                    <div class="tag-inner">Foo</div>
                </div>
                <div class="tag deletable clickable rioglyph rioglyph-remove rounded">
                    <div class="tag-inner">Bar</div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-default btn-component margin-top-15 disabled" tabindex="0">Save</button>
    </div>
</div>
```

#### Props (json)

```json
[
 {
     label: 'Foo',
 },
 {
     label: 'Bar',
     toAdd: true,
 },
 {
     label: 'Lorem ipsum',
     toRemove: true,
 }
]
```

### Example: Example 2

Lorem
Ipsum
Dolor sit amet

Save

#### React (tsx)

```tsx
import { useState } from 'react';
import { isEmpty } from 'es-toolkit/compat';

import TagManager from '@rio-cloud/rio-uikit/TagManager';
import Button from '@rio-cloud/rio-uikit/Button';
import type { TagManagerTag } from '../@rio-cloud/rio-uikit';

const tagListSuggestions: TagManagerTag[] = [{ label: 'Lorem' }, { label: 'Ipsum' }, { label: 'Dolor sit amet' }];
const existingTags: TagManagerTag[] = [];

export default () => {
    const [tagList, setTagList] = useState(existingTags);
    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);

    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);

    const handleSave = () => {
        const updatedTagList = unsavedTags
            .filter(tag => !tag.toRemove)
            .map(tag => {
                delete tag.toAdd;
                return tag;
            });

        setTagList(updatedTagList);
        setUnsavedTags([]);
    };

    return (
        <div className='row'>
            <div className='col-ls-6 col-lg-4'>
                <TagManager
                    tagList={tagList}
                    onTagListChange={handleTagListChange}
                    tagSuggestions={tagListSuggestions}
                    placeholder='Search fleet group'
                    dropdownSeparatorText='Choose existing fleet group'
                    noItemMessage='No group found with this name.'
                    useCustomTags={false}
                />
                <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>
                    Save
                </Button>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="row">
    <div class="col-ls-6 col-lg-4">
        <div class="TagManager">
            <div class="AutoSuggest dropdown dropup">
                <div class="ClearableInput input-group">
                    <input placeholder="Search fleet group" class="form-control" autocomplete="off" type="text" tabindex="1" value="">
                    <span class="clearButton hide">
                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                        </span>
                    </span>
                </div>
                <ul role="menu" class="dropdown-menu">
                    <li role="presentation" class="" data-item-index="0">
                        <a role="menuitem">Lorem</a>
                    </li>
                    <li role="presentation" class="" data-item-index="1">
                        <a role="menuitem">Ipsum</a>
                    </li>
                    <li role="presentation" class="" data-item-index="2">
                        <a role="menuitem">Dolor sit amet</a>
                    </li>
                </ul>
            </div>
            <div class="taglist taglist-autowidth taglist-vertical">
            </div>
        </div>
        <button type="button" class="btn btn-default btn-component margin-top-15 disabled" tabindex="0">Save</button>
    </div>
</div>
```

#### Props (json)

```json
[
 {
     label: 'Foo',
 },
 {
     label: 'Bar',
     toAdd: true,
 },
 {
     label: 'Lorem ipsum',
     toRemove: true,
 }
]
```

### Example: Fleet groups

Fleet groups
Select an already created fleet group or create a new one and save it immediately.

Type in new fleet group name above
Choose existing fleet group
Lorem
Ipsum
Dolor sit amet

Foo

Bar

Save

#### React (tsx)

```tsx
import { useState } from 'react';
import { isEmpty } from 'es-toolkit/compat';

import TagManager from '@rio-cloud/rio-uikit/TagManager';
import CustomState from '@rio-cloud/rio-uikit/CustomState';
import Button from '@rio-cloud/rio-uikit/Button';
import type { TagManagerTag } from '../@rio-cloud/rio-uikit';

const tagListSuggestions: TagManagerTag[] = [{ label: 'Lorem' }, { label: 'Ipsum' }, { label: 'Dolor sit amet' }];
const existingTags: TagManagerTag[] = [{ label: 'Foo' }, { label: 'Bar' }];

export default () => {
    const [tagList, setTagList] = useState(existingTags);
    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);

    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);

    const handleSave = () => {
        const updatedTagList = unsavedTags
            .filter(tag => !tag.toRemove)
            .map(tag => {
                delete tag.toAdd;
                return tag;
            });

        setTagList(updatedTagList);
        setUnsavedTags([]);
    };

    return (
        <div className='max-width-300'>
            <CustomState
                headline='Fleet groups'
                message={
                    <div>
                        <div className='margin-bottom-20'>
                            Select an already created fleet group or create a new one and save it immediately.
                        </div>
                        <TagManager
                            tagList={tagList}
                            onTagListChange={handleTagListChange}
                            tagSuggestions={tagListSuggestions}
                            placeholder='Search fleet group or create new'
                            customTagPlaceholder='Type in new fleet group name above'
                            dropdownSeparatorText='Choose existing fleet group'
                            noItemMessage='No group found with this name.'
                        />
                    </div>
                }
                icon='rioglyph-group'
                outerClassName='margin-bottom-15'
                condensed
            />
            <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>
                Save
            </Button>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-300">
    <div class="display-flex justify-content-center max-width-100pct">
        <div class="margin-0 width-100pct max-width-600 panel-default panel padding-10 margin-bottom-15">
            <div class="display-flex flex-column align-items-center text-center padding-15">
                <div class="text-size-16 margin-bottom-10">
                    <span class="rioglyph rioglyph-group text-color-light text-size-300pct">
                    </span>
                </div>
                <div class="text-size-h4 line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Fleet groups</div>
                <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
                    <div>
                        <div class="margin-bottom-20">Select an already created fleet group or create a new one and save it immediately.</div>
                        <div class="TagManager">
                            <div class="AutoSuggest dropdown dropup margin-bottom-10">
                                <div class="ClearableInput input-group">
                                    <input placeholder="Search fleet group or create new" class="form-control" autocomplete="off" type="text" tabindex="1" value="">
                                    <span class="clearButton hide">
                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                        </span>
                                    </span>
                                </div>
                                <ul role="menu" class="dropdown-menu">
                                    <li role="presentation" class="disabled" data-item-index="0">
                                        <a role="menuitem">
                                            <span class="display-flex align-items-center padding-top-5 padding-bottom-5 text-color-gray">
                                                <span class="margin-left--5 margin-right-5 margin-top--1 rioglyph rioglyph-arrow-up">
                                                </span>
                                                <span class="text-italic">Type in new fleet group name above</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="dropdown-header center ">
                                        <span class="dropdown-header-text">Choose existing fleet group</span>
                                    </li>
                                    <li role="presentation" class="" data-item-index="2">
                                        <a role="menuitem">Lorem</a>
                                    </li>
                                    <li role="presentation" class="" data-item-index="3">
                                        <a role="menuitem">Ipsum</a>
                                    </li>
                                    <li role="presentation" class="" data-item-index="4">
                                        <a role="menuitem">Dolor sit amet</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="taglist taglist-autowidth taglist-vertical">
                                <div class="tag deletable clickable rioglyph rioglyph-remove rounded">
                                    <div class="tag-inner">Foo</div>
                                </div>
                                <div class="tag deletable clickable rioglyph rioglyph-remove rounded">
                                    <div class="tag-inner">Bar</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-default btn-component margin-top-15 disabled" tabindex="0">Save</button>
</div>
```

#### Props (json)

```json
[
 {
     label: 'Foo',
 },
 {
     label: 'Bar',
     toAdd: true,
 },
 {
     label: 'Lorem ipsum',
     toRemove: true,
 }
]
```