TagInput
Um campo de múltiplas tags com suporte a busca, criação dinâmica, badges customizadas e scroll infinito.
Exemplos
Esse componente estende boa parte das funcionalidades do AutoComplete e do MultiSelect, então você pode conferir os exemplos desses componentes para ver mais opções de uso.
Com criação de nova tag
O TagInput permite criar novas opções com base na busca. Para isso, utilize a prop canCreate e onCreate. O texto exibido ao criar uma nova opção pode ser customizado com a prop createItemText, onde {search} será substituído pelo termo buscado. Além disso é possível customizar o ícone ao lado do texto de criação de item com a prop createItemIcon.
Com renderização customizada de badges
Com a propriedade renderValues, você pode customizar a renderização das tags selecionadas. Veja o exemplo abaixo:
Props
| Propriedade | Tipo |
|---|---|
| optionsLista de opções disponíveis. | Option[] |
| valueTags selecionadas. | string[] |
| onChangeCallback disparado ao alterar as seleções. | (options: string[]) => void |
| placeholderTexto do placeholder. | string |
| canClearPermite limpar as tags com ícone. Padrão: true. | boolean |
| canCreatePermite criar nova tag digitando. | boolean |
| onCreateCallback ao criar nova tag. | (value: string) => void |
| createItemTextTexto ao criar item. Use {search}. | string |
| createItemIconÍcone ao criar nova opção. | ReactNode |
| canFilterHabilita busca. Padrão: true. | boolean |
| filterByFunção de filtro customizado. | (value: string, search: string, keywords?: string[]) => number |
| onSearchCallback ao digitar na busca. | (value: string) => void |
| maxSelectionsNúmero máximo de seleções permitidas. | number |
| hidePlaceholderWhenSelectedEsconde o placeholder se houver seleção. | boolean |
| renderItemRenderização customizada das opções. | (option: Option) => ReactNode |
| renderValuesRenderização customizada dos valores. | (values: Option[]) => ReactNode |
| renderOutsideExibe badges fora do campo principal. | boolean |
| disabledDesabilita o campo. | boolean |
| loadingExibe estado de carregamento. | boolean |
| loadingStateTextTexto exibido durante carregamento. | string |
| passiveLoadingMostra loading mesmo com dados visíveis. | boolean |
| onEndReachedCallback ao atingir o final da lista (scroll infinito). | () => void |
| emptyStateTextTexto exibido quando não há resultados. | string |
| commandPropsProps adicionais para o Command container. | CommandProps |
| inputPropsProps adicionais para o input. | InputProps |
| classNameClasse CSS adicional. | string |