# ez-tag-input



<!-- Auto Generated Below -->


## Properties

| Property                         | Attribute                           | Description                                                                     | Type                                                         | Default     |
| -------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- |
| `allowDuplicates`                | `allow-duplicates`                  | Define se tags duplicadas são permitidas                                        | `boolean`                                                    | `false`     |
| `enabled`                        | `enabled`                           | Define se o input está habilitado                                               | `boolean`                                                    | `true`      |
| `helpText`                       | `help-text`                         | Texto de ajuda exibido abaixo do input                                          | `string`                                                     | `undefined` |
| `label`                          | `label`                             | Texto do label exibido acima do input                                           | `string`                                                     | `''`        |
| `maxTagLength`                   | `max-tag-length`                    | Tamanho máximo de uma tag                                                       | `number`                                                     | `undefined` |
| `maxTags`                        | `max-tags`                          | Número máximo de tags permitidas                                                | `number`                                                     | `undefined` |
| `name`                           | `name`                              | Nome do input                                                                   | `string`                                                     | `undefined` |
| `placeholder`                    | `placeholder`                       | Placeholder do input                                                            | `string`                                                     | `''`        |
| `readonly`                       | `readonly`                          | Define se o input é somente leitura                                             | `boolean`                                                    | `false`     |
| `state`                          | `state`                             | Estado visual do componente                                                     | `"default" \| "error" \| "success" \| "warning"`             | `"default"` |
| `suppressBackspaceToRemove`      | `suppress-backspace-to-remove`      | Define se a tecla Backspace deve remover a última tag quando o input está vazio | `boolean`                                                    | `false`     |
| `suppressTagsKeyboardNavigation` | `suppress-tags-keyboard-navigation` | Define se a navegação por teclado pelas tags deve ser suprimida                 | `boolean`                                                    | `false`     |
| `tags`                           | --                                  | Array de tags iniciais                                                          | `string[]`                                                   | `[]`        |
| `validator`                      | --                                  | Função de validação customizada para tags                                       | `(tag: string, existingTags: string[]) => string \| boolean` | `undefined` |


## Events

| Event               | Description                                   | Type                                            |
| ------------------- | --------------------------------------------- | ----------------------------------------------- |
| `ezBlur`            | Evento disparado quando o input perde foco    | `CustomEvent<string[]>`                         |
| `ezChange`          | Evento disparado quando as tags mudam         | `CustomEvent<string[]>`                         |
| `ezFocus`           | Evento disparado quando o input recebe foco   | `CustomEvent<string[]>`                         |
| `ezTagAdded`        | Evento disparado quando uma tag é adicionada  | `CustomEvent<string>`                           |
| `ezTagRemoved`      | Evento disparado quando uma tag é removida    | `CustomEvent<string>`                           |
| `ezType`            | Emitido quando é digitado no campo de entrada | `CustomEvent<string>`                           |
| `ezValidationError` | Evento disparado quando uma validação falha   | `CustomEvent<{ tag: string; error?: string; }>` |


## Methods

### `addTag(tag: string) => Promise<boolean>`

Adiciona uma tag programaticamente

#### Returns

Type: `Promise<boolean>`

---

### `clearTags() => Promise<void>`

Limpa todas as tags

#### Returns

Type: `Promise<void>`

---

### `removeTag(tag: string) => Promise<boolean>`

Remove uma tag programaticamente

#### Returns

Type: `Promise<boolean>`

---

### `setBlur() => Promise<void>`

Remove o foco do campo

#### Returns

Type: `Promise<void>`

---

### `setFocus(option?: OptionsSetFocus) => Promise<void>`

Aplica o foco no campo

#### Returns

Type: `Promise<void>`




## Dependencies

### Depends on

- [ez-chip](../ez-chip)

### Graph
```mermaid
graph TD;
  ez-tag-input --> ez-chip
  ez-chip --> ez-tooltip
  ez-chip --> ez-icon
  style ez-tag-input fill:#f9f,stroke:#333,stroke-width:4px
```

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




## CSS Variables
| Variable  | Description | 
 |-|-|
| --ez-tag-input--background-color | Define a cor de fundo do container do input. | 
| --ez-tag-input--border-color-default | Define a cor da borda no estado padrão. | 
| --ez-tag-input--border-color-focused | Define a cor da borda no estado focado. | 
| --ez-tag-input--border-color-error | Define a cor da borda no estado de erro. | 
| --ez-tag-input--border-color-success | Define a cor da borda no estado de sucesso. | 
| --ez-tag-input--border-color-warning | Define a cor da borda no estado de aviso. | 
| --ez-tag-input--border-radius | Define o raio da borda do container. | 
| --ez-tag-input--padding | Define o espaçamento interno do container. | 
| --ez-tag-input--gap | Define o espaçamento entre tags e input. | 
| --ez-tag-input--label-color | Define a cor do texto do label. | 
| --ez-tag-input--label-font-weight | Define o peso da fonte do label. | 
| --ez-tag-input--input-color | Define a cor do texto do input. | 
| --ez-tag-input--input-font-size | Define o tamanho da fonte do input. | 
| --ez-tag-input--placeholder-color | Define a cor do placeholder. | 
| --ez-tag-input--background-color-disabled | Define a cor de fundo do input quando está desabilitado. | 
| --ez-tag-input--helptext-color | Define a cor do texto de ajuda do input.  |