Tag ​

Tags represent a set of interactive, user-supplied keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by users.

Usage ​

<script lang="ts" setup>
import { Tag } from '@returnless/focus-ui';
</script>

<template>
  <Tag color="slate">Fulfilled</Tag>
  <Tag color="blue">Draft</Tag>
  <Tag color="green">Active</Tag>
  <Tag color="yellow">Open</Tag>
  <Tag color="red">Action required</Tag>
</template>

Best practices ​

Tags should:

• Be presented close to or within the input control that allows users to add and remove tags.

Accessibility ​

Labeling ​

The button to remove a tag is automatically given a label using aria-label so that screen reader users can distinguish which tag will be removed.

Keyboard support ​

The control to remove a tag is implemented as a button with standard keyboard support.

• Give buttons keyboard focus with the tab key (or shift + tab when navigating backwards).
• To activate a button, press the enter/return or space key.

When a user uses the button to remove a tag, it is important to make sure that keyboard focus is managed. Moving focus to the next element in the page is recommended.