TagInput
Campo de texto com múltiplos valores que cria tags removíveis ao pressionar Enter ou vírgula.
Demonstração
ReactTypeScript
MaxThree
DisabledTag
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
value | string[] | — | Array controlado de strings de tags. |
onChange | (tags: string[]) => void | — | Callback recebendo o array atualizado de tags. |
placeholder | string | 'Add tag…' | Placeholder exibido quando não há tags. |
disabled | boolean | false | Desabilita o campo. |
maxTags | number | — | Número máximo de tags permitido. |
Uso
import { TagInput } from '@ghiberti85/ui'
const [tags, setTags] = useState(['React', 'TypeScript'])
<TagInput value={tags} onChange={setTags} placeholder="Add tag…" />
// With max limit
<TagInput maxTags={5} value={tags} onChange={setTags} />
// Disabled
<TagInput disabled value={['React']} />