Tag Picker With Colors

When to use it

Use it for labels on issues, notes, files and contacts, where each tag has a colour and a person tagging something should be able to add a tag without leaving the flow.

Do not use it when tags have no colour or meaning beyond their name. Use a plain creatable multi-select.

Installation

Props

| Prop | Type | Default | Description | | --------------- | ---------------------------------------- | ------------- | ------------------------------ | ---------------------------------------- | | tags | { id, name, color }[] | - | Existing tags. | | value | string[] | - | Selected tag ids (controlled). | | defaultValue | string[] | [] | Initial selection. | | onValueChange | (ids: string[]) => void | - | Runs on every change. | | onCreate | (name: string, color: string) => Tag \\ | Promise<Tag> | local id | Makes the new tag. Return the saved tag. | | colors | { value, name }[] | 6 colours | Palette for new tags. |

Accessibility

• The trigger shows the selected tags as badges; the list is a multi-select listbox (aria-multiselectable) whose options carry aria-checked.
• Creating takes two steps: the Create row, then a named colour radio group; Escape returns to the list before it closes the popover.
• Each swatch is a radio with the colour name as its label.
• Tag names are text everywhere, so colour is decoration.

Testing

The pattern ships with a Testing Library test (tag-picker-with-colors.test.tsx) that covers toggling tags, the two-step creation with a colour, duplicates being refused and the multi-select semantics.