Skip to content

feat(TagInput): support tagDisplay #895

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RylanBot wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(TagInput): support tagDisplay #895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
154f3ce
feat(TagInput): support `tagDisplay`
May 27, 2026
553cb41
Merge branch 'main' into rylan/feat/taginput/tagDisplay
liweijie0812 Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
57 changes: 29 additions & 28 deletions packages/products/tdesign-react/packages/components/tag-input/tag-input.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,43 @@
name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
autoWidth | Boolean | false | \- | N
borderless | Boolean | false | \- | N
clearable | Boolean | false | \- | N
collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
collapsedItems | TElement | - | Typescript: `TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
disabled | Boolean | undefined | \- | N
dragSort | Boolean | false | \- | N
excessTagsDisplayType | String | break-line | options: scroll/break-line | N
inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
inputValue | String / Number | '' | input value。Typescript：`string` | N
defaultInputValue | String / Number | '' | input value。uncontrolled property。Typescript：`string` | N
label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
inputProps | Object | - | Typescript: `InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
inputValue | String / Number | '' | input value。Typescript: `string` | N
defaultInputValue | String / Number | '' | input value。uncontrolled property。Typescript: `string` | N
label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
max | Number | - | max tag number | N
minCollapsedNum | Number | 0 | \- | N
placeholder | String | undefined | placeholder description | N
prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
readonly | Boolean | undefined | \- | N
size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
status | String | - | options: default/success/warning/error | N
suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
tag | TNode | - | Typescript：`string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
value | Array | [] | value。Typescript：`TagInputValue` `type TagInputValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
defaultValue | Array | [] | value。uncontrolled property。Typescript：`TagInputValue` `type TagInputValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
valueDisplay | TNode | - | Typescript：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
onBlur | Function | | Typescript：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`<br/>trigger on blur | N
onChange | Function | | Typescript：`(value: TagInputValue, context: TagInputChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。<br/>`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }`<br/><br/>`type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'`<br/> | N
onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onDragSort | Function | | Typescript：`(context: TagInputDragSortContext) => void`<br/>trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。<br/>`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }`<br/> | N
onEnter | Function | | Typescript：`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void`<br/> | N
onFocus | Function | | Typescript：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`<br/>trigger on focus | N
onInputChange | Function | | Typescript：`(value: string, context?: InputValueChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。<br/>`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }`<br/> | N
onMouseenter | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on mouseenter | N
onMouseleave | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on mouseleave | N
onPaste | Function | | Typescript：`(context: { e: ClipboardEvent; pasteValue: string }) => void`<br/> | N
onRemove | Function | | Typescript：`(context: TagInputRemoveContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。<br/>`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }`<br/><br/>`type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'`<br/> | N
suffix | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
suffixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
tag | TNode | - | Typescript: `string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
tagDisplay | Function | - | Typescript: `TNode<{ value: string \| number; index: number; onClose: (context?: { e?: MouseEvent }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
tagProps | Object | - | Typescript: `TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
tips | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
value | Array | [] | value。Typescript: `TagInputValue` `type TagInputValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
defaultValue | Array | [] | value。uncontrolled property。Typescript: `TagInputValue` `type TagInputValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
valueDisplay | TNode | - | Typescript: `string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
onBlur | Function | | Typescript: `(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`<br/>trigger on blur | N
onChange | Function | | Typescript: `(value: TagInputValue, context: TagInputChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。<br/>`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }`<br/><br/>`type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'`<br/> | N
onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
onClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
onDragSort | Function | | Typescript: `(context: TagInputDragSortContext) => void`<br/>trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。<br/>`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }`<br/> | N
onEnter | Function | | Typescript: `(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void`<br/> | N
onFocus | Function | | Typescript: `(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`<br/>trigger on focus | N
onInputChange | Function | | Typescript: `(value: string, context?: InputValueChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。<br/>`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }`<br/> | N
onMouseenter | Function | | Typescript: `(context: { e: MouseEvent }) => void`<br/>trigger on mouseenter | N
onMouseleave | Function | | Typescript: `(context: { e: MouseEvent }) => void`<br/>trigger on mouseleave | N
onPaste | Function | | Typescript: `(context: { e: ClipboardEvent; pasteValue: string }) => void`<br/> | N
onRemove | Function | | Typescript: `(context: TagInputRemoveContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。<br/>`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }`<br/><br/>`type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'`<br/> | N
1 change: 1 addition & 0 deletions packages/products/tdesign-react/packages/components/tag-input/tag-input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ status | String | - | 输入框状态。可选项：default/success/warning/erro
suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
tag | TNode | - | 自定义标签的内部内容，每一个标签的当前值。注意和 `valueDisplay` 区分，`valueDisplay` 是用来定义全部标签内容，而非某一个标签。TS 类型：`string \| TNode<{ value: string \| number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
tagDisplay | Function | - | 自定义单个标签的整体节点。TS 类型：`TNode<{ value: string \| number; index: number; onClose: (context?: { e?: MouseEvent }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
tagProps | Object | - | 透传 Tag 组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
value | Array | [] | 值。TS 类型：`TagInputValue` `type TagInputValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N
Expand Down
8 changes: 6 additions & 2 deletions packages/products/tdesign-react/packages/components/tag-input/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

import { InputProps } from '../input';
import { TagProps } from '../tag';
import { TNode, TElement, SizeEnum } from '../common';
import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
import type { TNode, TElement, SizeEnum } from '../common';
import type { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';

export interface TdTagInputProps {
/**
Expand Down Expand Up @@ -108,6 +108,10 @@ export interface TdTagInputProps {
* 自定义标签的内部内容，每一个标签的当前值。注意和 `valueDisplay` 区分，`valueDisplay` 是用来定义全部标签内容，而非某一个标签
*/
tag?: string | TNode<{ value: string | number }>;
/**
* 自定义单个标签的整体节点
*/
tagDisplay?: TNode<{ value: string | number; index: number; onClose: (context?: { e?: MouseEvent }) => void }>;
/**
* 透传 Tag 组件全部属性
*/
Expand Down
4 changes: 4 additions & 0 deletions packages/products/tdesign-vue-next/packages/components/tag-input/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,10 @@ export default {
tag: {
type: [String, Function] as PropType<TdTagInputProps['tag']>,
},
/** 自定义单个标签的整体节点 */
tagDisplay: {
type: Function as PropType<TdTagInputProps['tagDisplay']>,
},
/** 透传 Tag 组件全部属性 */
tagProps: {
type: Object as PropType<TdTagInputProps['tagProps']>,
Expand Down
Loading