> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# TagFormModal component

## Overview

The `TagFormModal` component is a React component that displays a modal form that can be used to create a new tag or update an existing tag. The form works in the "**Create**" or "**Update**" mode depending on its props passed.

## Permissions

To access this component, the entity user must have `create` and `update` permissions for the `tag` object. For more information, see [List of permissions](/api/concepts/authentication#permissions).

## Preview

![TagFormModal component preview](/_fern-img/680da5eecabba728f5c5073b4964806c6026eeb31c6d68b04d913087cee4e9b8.webp)

## Usage

Use the `TagFormModal` component to create new tags and update details of an existing tag. To create a new tag, import the `TagFormModal` component and bring it into your application as shown:

**`Create new tag`**

```jsx Create new tag
import { TagFormModal } from "@monite/sdk-react";

// This component must be rendered within the MoniteProvider wrapper
return <TagFormModal open />;
```

To update details of an existing tag, use the `TagFormModal` component with the `tag` prop. The `tag` prop accepts an object with tag UUID and tag name as shown:

**`Rename existing tag`**

```jsx Rename existing tag
import { TagFormModal } from "@monite/sdk-react";

// This component must be rendered within the MoniteProvider wrapper
return (
  <TagFormModal
    open
    tag={{
      id: "ea837e28-509b-4b6a-a600-d54b6aa0b1f5",
      name: "Existing tag",
    }}
  />
);
```

## Props

| Prop       | Type       | Description                                                                                                               |
| :--------- | :--------- | :------------------------------------------------------------------------------------------------------------------------ |
| `onClose`  | `function` | This is a callback function triggered when the modal form is closed. For example, after clicking the "**Cancel**" button. |
| `onCreate` | `function` | This is a callback function triggered upon successful tag creation.                                                       |
| `open`     | `boolean`  | This prop determines whether the modal is opened or closed.                                                               |
| `tag`      | `object`   | This prop defines the tag ID and name. It is required when updating a tag.                                                |

The `tag` prop accepts an object that contains two mandatory fields:

* `id` (string) - the UUID of an existing tag you want to delete.
* `name` (string) - the tag name to display in the prompt.