TagPicker

TagPicker selects multiple items and shows each one as a Tag right inside the input.

Type to filter the suggestions (diacritics are ignored), press Enter to add, Backspace in an empty input to remove the last tag, Left arrow to move between tags. Selected options are hidden from the list.

Post tags

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { TagPicker } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Avatar & secondary text

media shows on both the option and the tag; size large uses small tags, which fit a 20px Avatar.

Freeform

Type a new keyword and press Enter to create a tag.

2 members selected

Controlled

value / onValueChange; tagAppearance and tagShape change the tag style.

Ordering tags

reorderable: drag a tag, or focus it (← from the input) and press Alt + ← → to change the order. Clicking a tag without dragging still removes it.

Size

medium (extra-small tags), large (small tags), extra-large (medium tags).

Usage

Use it when people pick several items and need to see each selected item clearly.
Add an Avatar or secondary text when picking people, so people with the same name can be told apart.
Turn on freeform for keywords, email addresses and other values that aren't in the list.

Don't

Don't use it for single selection. Use Combobox or Dropdown.
Don't let tags pile up until the input grows out of the layout. Consider limiting the count.

Props

Prop · Type	Default	Description
options(string \| { value, label?, media?, secondaryText?, disabled?, group? })[]	Default: —	Suggestions.
value / defaultValuestring[]	Default: —	Selected values.
onValueChange(value: string[]) => void	Default: —	Called when a tag is added or removed.
size"medium" \| "large" \| "extra-large"	Default: "medium"	Minimum height 32 / 40 / 48px.
appearance"outline" \| "underline" \| "filled-darker" \| "filled-lighter"	Default: "outline"	Control style.
tagAppearance / tagShapeTagAppearance / TagShape	Default: —	Style of the selected tags.
freeformboolean	Default: false	Enter creates a tag from the typed text.
reorderableboolean	Default: false	Drag a tag, or press Alt + arrow keys while a tag has focus, to change the order (Sortable).
noResultsTextReactNode	Default: —	Shown when no suggestions match.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.tagPicker

Key · Type	Default (English)	messagesVi
noResultsstring Nội dung khi không có kết quả lọc.	Default (English)`"No results found"`	messagesVi`"Không tìm thấy kết quả"`
addFreeform(query: string) => string Gợi ý khi `freeform` và chữ gõ không khớp option nào.	Default (English)(query) => `Press Enter to add “${query}”`	messagesVi(query) => `Nhấn Enter để thêm “${query}”`
selectedItemsstring aria-label nhóm tag đã chọn.	Default (English)`"Selected items"`	messagesVi`"Mục đã chọn"`
closeListstring aria-label nút mũi tên khi listbox đang mở.	Default (English)`"Close list"`	messagesVi`"Đóng danh sách"`
openListstring aria-label nút mũi tên khi listbox đang đóng.	Default (English)`"Open list"`	messagesVi`"Mở danh sách"`
listLabelstring Tên của listbox khi ô nhập không có nhãn hiển thị (Field nối nhãn qua aria-labelledby).	Default (English)`"Suggestions"`	messagesVi`"Gợi ý"`