The InputTag component allows users to add content as tags.
Basic Usage
Press the Enter key to add the input as a tag.
export function InputTagBasic() { const [input, setInput] = useState<string[]>(); return ( <ElInputTag value={input} onChange={setInput} placeholder="Please input" ariaLabel="Please click the Enter key after input" /> ); } Custom Trigger
You can customize the key used to trigger the input tag. The default key is Enter.
export function InputTagTrigger() { const [trigger, setTrigger] = useState<"Enter" | "Space">("Space"); const [input, setInput] = useState<string[]>(); return ( <> <div> <ElSegmented value={trigger} onChange={(next) => setTrigger(next as "Enter" | "Space")} options={["Enter", "Space"]} /> </div> <br /> <ElInputTag value={input} onChange={setInput} trigger={trigger} placeholder="Please input" /> </> ); } You can set a limit on the number of tags that can be added.
export function InputTagMax() { const [input, setInput] = useState<string[]>(); return ( <ElInputTag value={input} onChange={setInput} max={3} placeholder="enter up to 3 tags" /> ); } Use the collapse tags attribute to merge them into one piece of text. You can use the collapse tags tooltip property to enable the behavior of hovering over collapsed text to display specific selected values. Using the collapse tags tooltip attribute will render the max attribute invalid.
use collapse-tags
use collapse-tags-tooltip
use max-collapse-tags
export function InputTagCollapse() { const [input1, setInput1] = useState<string[]>(); const [input2, setInput2] = useState<string[]>(); const [input3, setInput3] = useState<string[]>(); return ( <div style={{ margin: 16 }}> <p>use collapse-tags</p> <ElInputTag value={input1} onChange={setInput1} collapseTags placeholder="Please input" ariaLabel="Please click the Enter key after input" /> <p>use collapse-tags-tooltip</p> <ElInputTag value={input2} onChange={setInput2} collapseTags collapseTagsTooltip placeholder="Please input" ariaLabel="Please click the Enter key after input" /> <p>use max-collapse-tags</p> <ElInputTag value={input3} onChange={setInput3} collapseTags collapseTagsTooltip maxCollapseTags={3} placeholder="Please input" ariaLabel="Please click the Enter key after input" /> </div> ); } Disabled
You can set the InputTag to be disabled.
export function InputTagDisabled() { const [input, setInput] = useState<string[] | undefined>(["tag1", "tag2", "tag3"]); return ( <ElInputTag value={input} onChange={setInput} disabled placeholder="Please input" /> ); } Clearable
You can set whether to show the clear button.
export function InputTagClearable() { const [input, setInput] = useState<string[] | undefined>(["tag1", "tag2", "tag3"]); return ( <ElInputTag value={input} onChange={setInput} clearable placeholder="Please input" /> ); } Custom Clear Icon 2.11.0
You can customize the clear icon by setting the clear-icon attribute.
export function InputTagClearIcon() { const [input, setInput] = useState<string[] | undefined>(["custom", "clear", "icon"]); return ( <ElInputTag value={input} onChange={setInput} clearable clearIcon={<CloseBold />} placeholder="Custom clear icon" /> ); } Draggable
You can set whether tags can be dragged.
export function InputTagDraggable() { const [input, setInput] = useState<string[] | undefined>(["tag1", "tag2", "tag3"]); return ( <ElInputTag value={input} onChange={setInput} draggable placeholder="Please input" /> ); } Delimiter 2.9.9
You can add a tag when a delimiter is matched.
export function InputTagDelimiter() { const [input, setInput] = useState<string[] | undefined>([]); return ( <ElInputTag value={input} onChange={setInput} draggable placeholder="Try to separate words with ," delimiter="," /> ); } Sizes
Add size attribute to change the size of InputTag. In addition to the default size, there are two other options: large, small.
export function InputTagSize() { const [input, setInput] = useState<string[]>(); return ( <> <ElInputTag value={input} onChange={setInput} size="large" placeholder="Please input" /> <br /> <ElInputTag value={input} onChange={setInput} placeholder="Please input" /> <br /> <ElInputTag value={input} onChange={setInput} size={"small" as ComponentSize} placeholder="Please input" /> </> ); } Custom Tag
You can customize the tag content by tag slot.
export function InputTagCustomTag() { const [tagType, setTagType] = useState<TagType>("primary"); const [tagEffect, setTagEffect] = useState<TagEffect>("plain"); const [input, setInput] = useState<string[] | undefined>(["tag1", "tag2", "tag3"]); return ( <> <div> <ElSegmented value={tagType} onChange={(next) => setTagType(next as TagType)} options={["primary", "success", "info", "warning", "danger"]} style={marginRight20} /> <ElSegmented value={tagEffect} onChange={(next) => setTagEffect(next as TagEffect)} options={["light", "dark", "plain"]} /> </div> <br /> <ElInputTag value={input} onChange={setInput} tagType={tagType} tagEffect={tagEffect} placeholder="Please input" > {(value) => ( <div style={iconRow}> <ElIcon style={{ marginRight: 4 }}> <ElementPlus /> </ElIcon> <span>{value}</span> </div> )} </ElInputTag> </> ); } Custom Prefix and Suffix
You can customize the prefix and suffix of the InputTag by prefix and suffix slot.
export function InputTagPrefixSuffix() { const [input, setInput] = useState<string[]>(); return ( <ElInputTag value={input} onChange={setInput} clearable placeholder="Please input" prefix={ <ElIcon> <ElementPlus /> </ElIcon> } suffix={ <ElIcon> <Search /> </ElIcon> } /> ); } API
Attributes
Name Description Type Default model-value / v-model binding value array— max max number tags that can be enter number— tag-type tag type enuminfo tag-effect tag effect enumlight effect 2.13.2 tooltip theme, built-in theme: dark / light enumstringlight trigger the key to trigger input tag enumEnter draggable whether tags can be dragged booleanfalse delimiter 2.9.9 add a tag when a delimiter is matched stringregex— size input box size enum— collapse-tags 2.11.0 whether to collapse tags to a text when multiple selecting booleanfalse collapse-tags-tooltip 2.11.0 whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true booleanfalse save-on-blur 2.9.7 whether to save the input value when the input loses focus booleantrue clearable whether to show clear button booleanfalse clear-icon 2.11.0 custom clear icon component stringobjectCircleClose disabled whether to disable input-tag booleanfalse validate-event whether to trigger form validation booleantrue readonly same as readonly in native input booleanfalse autofocus same as autofocus in native input booleanfalse id same as id in native input string— tabindex same as tabindex in native input stringnumber— max-collapse-tags 2.11.0 the max tags number to be shown. To use this, collapse-tags must be true number1 maxlength same as maxlength in native input stringnumber— minlength same as minlength in native input stringnumber— placeholder placeholder of input string— autocomplete same as autocomplete in native input stringoff aria-label a11y native aria-label attribute string—
Events
Name Description Type change triggers when the modelValue change Functioninput triggers when the input value change Functionadd-tag triggers when a tag is added Functionremove-tag triggers when a tag is removed Functiondrag-tag 2.11.3 triggers when a tag is dragged Functionfocus triggers when InputTag focuses Functionblur triggers when InputTag blurs Functionclear triggers when the clear icon is clicked Function
Slots
Name Description Type tag content as tag objectprefix content as InputTag prefix — suffix content as InputTag suffix —
Exposes
Name Description Type focus focus the input element Functionblur blur the input element Function
