As tags são representações de uma entrada, atributo ou ação, permitindo que o usuário faça seleção ou filtre conteúdo. Tags são componentes compactos que tem como função efetivar uma ação. São utilizadas para itens que precisam ser rotulados, categorizados ou organizados usando palavras-chave que os descrevem. Possibilita o usuário de incluir informações, fazer seleções e filtrar conteúdos referentes ao contexto.
A tag deve tornar o conteúdo algo fácil de se ler e consumir.
Anatomia
A tag tem um formato de pílula, sem varições. Ela tem um ícone de excluir sempre ativo e também um nome ou texto de no máximo três palavras.
Contêiner Comporta todos os elementos da tag
Ícone de remoção Possibilita a remoção de uma entrada
Texto da tag Conteúdo/descrição do que se refere a tag.
Tag de input
Representa a entrada de informação usadas em campos de texto, combo box e afins. Caracterizam as informações usadas em campos. O usuário insere uma entrada e, após verificação, a mesma é convertida em tag.
- As tags de entrada podem ser utilizadas como sugestões de respostas;
- As tags de entrada são editáveis;
- Caso o texto imputado pelo usuário não seja reconhecido, as tags podem exibir um cenário de erro;
- Um campo de input pode ter várias tags de entrada;
- As tags de entrada podem ser inseridos a diversos componentes;
Some value Some value Some value
<span class="tag">
Some value
<button class="delete"></button>
</span>
<span class="tag is-info">
Some value
<button class="delete"></button>
</span>
<span class="tag is-danger">
Some value
<button class="delete"></button>
</span>Tag de seleção
Caracterizam um conjunto de tags com pelo menos duas opções de seleção, podendo ser de escolha única ou múltipla escolha, dependendo do contexto que se aplica. Em casos de muitas opções de escolha e pouco espaço vertical, o uso de tags de seleção se faz uma boa alternativa. É um componente que se assemelha (funcionalmente) com radio buttons e combo box.
- Em casos de única escolha: A seleção de uma tag, cancela automaticamente outra tag que tenha sido selecionada anteriormente;
- As tags de seleção não devem ser utilizadas quando apenas uma opção de escolha é disponibilizada para o usuário;
- As tags de seleção podem ser distribuídas em mais de uma linha; no entanto, deve ser evitado. Utilizar das tags de seleção em demasia torna mais complexa a associação da informação;
<div class="tags">
<a class="tag">Option A</a>
<a class="tag">Option B</a>
<a class="tag is-active">Option C</a>
<a class="tag">Option D</a>
<a class="tag is-active">Option E</a>
</div>Acessibilidade
Para garantir que as tags sejam acessíveis, elas precisam atender aos requisitos de contraste de cores facilitando assim a leitura e o entendimento do contexto que está inserida.