# gd-tag-input



<!-- Auto Generated Below -->


## Properties

| Property      | Attribute     | Description                                                | Type                 | Default     |
| ------------- | ------------- | ---------------------------------------------------------- | -------------------- | ----------- |
| `controlId`   | `control-id`  | The element id                                             | `string`             | `undefined` |
| `disabled`    | `disabled`    | Disables the input / select / textarea from edit or copy.  | `boolean`            | `undefined` |
| `htmlSize`    | `html-size`   | Specifies how much of the input is shown.                  | `number`             | `undefined` |
| `name`        | `name`        | The name applied to the input                              | `string`             | `undefined` |
| `placeholder` | `placeholder` | The placeholder text for the input                         | `string`             | `undefined` |
| `readOnly`    | `read-only`   | The value of the input is not editable.                    | `boolean`            | `undefined` |
| `required`    | `required`    | Used for making form control required                      | `boolean`            | `false`     |
| `size`        | `size`        | Used to change the size of inputs and labels respectively. | `"lg" \| "sm"`       | `undefined` |
| `value`       | `value`       | The value of the input                                     | `string \| string[]` | `undefined` |
| `variant`     | `variant`     | change the style of the tags                               | `"pills"`            | `undefined` |


## Events

| Event        | Description                               | Type                              |
| ------------ | ----------------------------------------- | --------------------------------- |
| `tagsChange` | The event is emitted when the tags change | `CustomEvent<string \| string[]>` |


## Methods

### `addTags(tags: Tags) => Promise<void>`



#### Returns

Type: `Promise<void>`




## Dependencies

### Used by

 - [gd-user-dashboard](../gd-user-dashboard)
 - [gd-user-dashboard-list-item](../gd-user-dashboard-list-item)

### Graph
```mermaid
graph TD;
  gd-user-dashboard --> gd-tag-input
  gd-user-dashboard-list-item --> gd-tag-input
  style gd-tag-input fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
