Carregando…

Tag Input

Inputs

Input that creates and removes inline tag chips on Enter or delimiter.

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/tag-input

Instalação via CLI

$ npx kikitocn add tag-input

Exemplo de uso

Tag InputExample.tsx

import { TagInput } from "@/components/ui/cn/tag-input/TagInput";

export function TagInputExample() {
  return (
    <TagInput />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`string[]`	—	Tags controladas
`defaultValue`	`string[]`	—	Tags iniciais
`onChange`	`(tags: string[]) => void`	—	Callback ao alterar tags
`placeholder`	`string`	—	Placeholder do campo de entrada
`max`	`number`	—	Número máximo de tags
`allowDuplicates`	`boolean`	`false`	Permitir tags duplicadas
`delimiter`	`string \| RegExp`	`','`	Caractere que cria uma nova tag
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do campo
`disabled`	`boolean`	`false`	Desabilitar campo
`className`	`string`	—	Classes CSS extras

Carregando…