# Tags

Table of Contents

###### Examples

Basic Usage
Allowed Tags
Disallowed Tags

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

### Description

The `Tags` component allows users to add and remove tags. It extends the Component class.

### Basic Usage

Use the `Tags` component to allow users to add and remove tags. Tags can be added by typing them into the input field and pressing Enter or by pasting a comma-separated list of tags. You can delete a tag by clicking on it.

    <k-tags>
      <label>Tags</label>
    </k-tags>

Tags

### Allowed Tags

Use the `allowedTags` attribute to specify a comma-separated list of allowed tags. Only these tags can be added.

    <k-tags allowed-tags="tag1,tag2,tag3">
      <label>Allowed Tags</label>
    </k-tags>

Allowed Tags

### Disallowed Tags

Use the `disallowedTags` attribute to specify a comma-separated list of disallowed tags. These tags cannot be added.

    <k-tags disallowed-tags="tag1,tag2,tag3">
      <label>Disallowed Tags</label>
    </k-tags>

Disallowed Tags

## JavaScript Reference

### Constructor

###### Extends Component

##### `new Tags()`

### Requirements

- Component

### Attributes

##### `value: string`

A comma-separated list of tags.

##### `allowedTags: string`

A comma-separated list of allowed tags. If specified, only these tags can be added.

##### `disallowedTags: string`

A comma-separated list of disallowed tags. If specified, these tags cannot be added.

### Methods

##### `addTag(tag): void`

Adds a tag to the list of tags.

##### `removeTag(tag): void`

Removes a tag from the list of tags.

##### `validateTags(): string`

Validates the list of tags against the allowed and disallowed tags and returns the valid tags as a comma-separated string.