# Code

### API

You can import the interfaces that are used for the `onRemove` and `onChange.`This component extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the className prop is not included in the table.

| Props             | Type                                      | Required |
| ----------------- | ----------------------------------------- | -------- |
| `children`        | `ReactNode`                               | ✅        |
| `value`           | `string`                                  | :x:      |
| `isRemovable`     | `boolean`                                 | :x:      |
| `isSelectable`    | `boolean`                                 | :x:      |
| `characterLimit`  | `number`                                  | :x:      |
| `tooltipPosition` | `'top' \| 'bottom' \| 'right' \| 'left';` | :x:      |
| `checked`         | `boolean`                                 | :x:      |
| `defaultChecked`  | `boolean`                                 | :x:      |
| `onRemove`        | `(e: TagRemoveEventProps) => void;`       | :x:      |
| `onChange`        | `(e: TagChangeEventProps) => void; }`     | :x:      |

<details>

<summary>children</summary>

The children can be a string, an HTML element or even a `Tag.Avatar` without the need to install the [`Avatar`](https://app.gitbook.com/o/-M_7-lSPEt2IeTSqnKOP/s/nQcamo2kpq9cVAm8pjFX/) component as a dependency.

</details>

<details>

<summary>value</summary>

Used to have a controlled way of using the `Tag` component.

</details>

<details>

<summary>isRemovable and isSelectable</summary>

Capability of removing and selecting the `Tag`.

</details>

<details>

<summary>characterLimit</summary>

The character limit used to constrain the string passed as child. If the string passed surpassed the `characterLimit` value,a tooltip is rendered. The default value is 15.

</details>

<details>

<summary>checked</summary>

Use when having a controlled state of the tags.

</details>

<details>

<summary>defaultChecked</summary>

Use to change the checked state in an uncontrolled way.

</details>

<details>

<summary>onRemove and onChange</summary>

The methods that are triggered when the Tag is removed/state changes.

</details>

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Demo</td><td><a href="https://codesandbox.io/s/tag-2nd2ns">Code Sandbox</a></td><td></td></tr></tbody></table>
