TagsInput
Campo de etiquetas — vários valores curtos num só campo, mostrados como chips removíveis. Use para tópicos, etiquetas, competências ou destinatários de e-mail, com ou sem lista de sugestões.
Instalação
Configure o Camaleo uma vez (Instalação) e importe. Coloque dentro de um Field para o rótulo dar nome ao input.
import { TagsInput, Field, FieldLabel, FieldDescription } from "@camaleo/react";Anatomia
Os chips e um input de texto dividem a mesma caixa. Cada chip tem seu botão de remover, e as sugestões abrem num popup logo abaixo.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Aperte Enter depois de cada tópico.
Escolher de uma lista
Digite "py". Sem allowCustom só entram as suggestions, então todo perfil usa os mesmos nomes e a busca encontra todos.
Sugestões e tags novas
Digite uma etiqueta que não está na lista e aperte Enter. O emptyText avisa que o Enter cria a tag, então ninguém fica esperando aparecer uma opção.
3 / 5 competências
Limite e duplicadas
Adicione "React" de novo, ou uma sexta competência. Uma tag repetida fica no campo sem chamar o onValueChange, então pegue-a no onKeyDown; recuse o limite no onValueChange e explique no FieldError.
Cole uma lista: vírgulas, ponto e vírgula e quebras de linha separam os itens.
Colar uma lista
Cole "joao@acme.com, lia@acme.com". Um onPaste separa por vírgulas e quebras de linha, então uma coluna copiada da planilha vira um chip por endereço.
Backspace remove o último tópico; ← vai até um tópico e Delete remove.
Remover pelo teclado
Foque o input e aperte Backspace, ou ← e Delete. Cada botão de remover leva o nome da tag pelo removeLabel, no idioma da página.
Num formulário
Clique em salvar. Com name, cada tag vai como um valor separado, e formData.getAll("labels") devolve a lista.
Bloqueado durante a auditoria trimestral, até 15/11.
Desativado, com motivo
O disabled trava os chips e o input. Diga na descrição o motivo e até quando, senão parece defeito.
Em contexto
Tags ficam ao lado de outros campos. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Configurações do artigo
Até 5. Leitores podem seguir tags.
Boas práticas
Sugira as tags que já existem, assim filtros e relatórios contam tudo junto.
Cada pessoa escreve a mesma tag de um jeito, e o filtro por "bug" perde duas delas.
Tags curtas cabem numa linha e se leem de relance.
Elas enchem a linha, ninguém filtra por elas, e o lugar delas é num comentário.
Props
Outros atributos de <input>, como placeholder, type, onKeyDown e onPaste, vão para o input interno.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio campo.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O input tem role="combobox"; dentro de um Field, o FieldLabel dá nome a ele, e a descrição e o erro são lidos junto.
- O botão de remover de cada chip precisa de nome: o removeLabel monta a partir da tag, como "Remover financeiro". Traduza.
- Quando você recusa uma tag (duplicada, limite, e-mail inválido), mostre o motivo em texto no FieldError; uma recusa em silêncio parece tecla quebrada.
- O popup vai para um portal mas mantém o estilo pelo PortalScope, e o contraste passa no WCAG 2.2 AA nos 13 estilos.