[Components](https://oods-foundry.com/components) / behavioral

# TagManager

Presents a list of tags with tag editing controls.

Generated from @oods/foundry 0.10.1

- Categories

  behavioral

- Contexts

  detail

- Readiness

  `react-and-vue`

## Playground

This component's contract doesn't list typed props, so the playground shows its documented example.

Documented example `tag-manager-list-and-add-control` : mount, h2 heading, two visible tag items and an unwired Add Tag text input.

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

The real TagManager, live

React

Vue

## Code

The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

**React**

```
import { TagManager } from '@oods/components-react';
import '@oods/component-styles/css';

const tags = [
  "alpha",
  {
    "label": "beta"
  }
];

export function Example() {
  return (
    <TagManager
      title="Tags"
      tags={tags}
    />
  );
}
```

## Props, slots and events

Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

Props

| Prop | Type | Required | Documented example |
| - | - | - | - |
| `title` | `string \| undefined` | no | `Tags` |
| `label` | `string \| undefined` | no | |
| `heading` | `string \| undefined` | no | |
| `name` | `string \| undefined` | no | |
| `description` | `string \| undefined` | no | |
| `subtitle` | `string \| undefined` | no | |
| `hint` | `string \| undefined` | no | |
| `tags` | `readonly unknown[] \| undefined` | no | `["alpha",{"label":"beta"}]` |
| `value` | `readonly unknown[] \| undefined` | no | |

### Slots

default

### Events

none

## States

populated, empty

## Accessibility

- Role

  `textbox`

- How it gets its name

  `label` on `input`

### Keyboard

Keyboard

| Key | What it does |
| - | - |
| `Tab` | Move focus to the named native control |
| `x` | Edit the named control |

### Obligations in the contract

- A real h3 heading names the form
- Each tag is visible text
- The add control is a text input with a visible Add Tag label

Mirrors renderTagManager over renderFormContainer with data-form-type=tag-manager: title aliases title/label/heading/name (default Tag Manager), subtitle aliases description/subtitle/hint, tags or value render one data-tag-item per entry (records read label/name/role/value/id, scalars render as text), followed by the Add Tag input named newTag; authored children replace that generated body. The generic field lowers to tags; allowCustomParameter, allowListParameter, maxTagsParameter, moderationParameter and synonymParameter are consumed. The add control is unwired in the HTML renderer and stays unwired here: submitting the form is a no-op and the contract declares no events.

## Tokens

The token roles this component reads.

- `form.background`
- `form.border`
- `form.text`
- `form.hint`

## Readiness

The evidence recorded for this component, with its label.

`react-and-vue`: catalog_list gives this label when the React and Vue components have complete readiness evidence, but the sweep's generated apps don't use the component in both.

Readiness evidence

| Evidence | React | Vue |
| - | - | - |
| state | implemented-evidence-complete | implemented-evidence-complete |
| versioned contract | passed | passed |
| target implementation | passed | passed |
| package export | passed | passed |
| public declaration | passed | passed |
| dependency closure | passed | passed |
| framework scenario | passed | passed |
| accessibility | verified | verified |
| interaction | verified | verified |
| visual themes | verified | verified |

## Use your own

You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

The `component_map` call, with the parts in angle brackets yours to fill:

```
{
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourTagManager>",
  "oodsTraits": [
    "<trait names>"
  ],
  "substitution": {
    "component": "TagManager",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourTagManager>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourTagManager>"
    }
  }
}
```

## How this page was made

Generated at build from the published data, each source with the hash of what was read. [The page's manifest](https://oods-foundry.com/components/tag-manager/manifest.json).

- **Contract**: `@oods/component-contracts@0.10.1 componentContracts.TagManager` `sha256:d76d25d4f9ed…`
- **Documented example**: `@oods/component-contracts@0.10.1 sharedScenarios tag-manager-list-and-add-control` `sha256:9369e0ddb56d…`
- **Catalog entry (catalog_list)**: `generated/0.10.1/system/catalog.json TagManager` `sha256:e7e3eee824ca…`
- **React readiness**: `@oods/components-react@0.10.1 readiness TagManager` `sha256:7d111788ced6…`
- **Vue readiness**: `@oods/components-vue@0.10.1 readiness TagManager` `sha256:dc48ab4f2091…`
- **Prop types**: `generated/0.10.1/components/prop-types.json TagManager` `sha256:6b4dd2922abd…`