File tree Expand file tree Collapse file tree 1 file changed +40
-0
lines changed
Expand file tree Collapse file tree 1 file changed +40
-0
lines changed Original file line number Diff line number Diff line change @@ -52,6 +52,46 @@ selecting multiple values. The options panel will **not** be closed after select
5252 <Story id = " components-combobox--multiselect" />
5353</Canvas >
5454
55+ ### Limiting visible tags with maxTags
56+
57+ When many items are selected, the input can become crowded. Use the ` maxTags ` prop to limit visible tags and show a "+N more" indicator.
58+
59+ ``` html
60+ <a-combobox v-model =" values" :options =" options" :max-tags =" 3" />
61+ ```
62+
63+ <Canvas >
64+ <Story id = " components-combobox--multiselect-max-tags" />
65+ </Canvas >
66+
67+ You can customize the collapsed label text with the ` collapsedTagsLabel ` prop:
68+
69+ ``` html
70+ <a-combobox
71+ v-model =" values"
72+ :options =" options"
73+ :max-tags =" 2"
74+ :collapsed-tags-label =" (n) => `(${n} hidden)`" />
75+ ```
76+
77+ <Canvas >
78+ <Story id = " components-combobox--multiselect-max-tags-custom-label" />
79+ </Canvas >
80+
81+ For full customization, use the ` #selected-tags ` slot:
82+
83+ ``` html
84+ <a-combobox v-model =" values" :options =" options" >
85+ <template #selected-tags =" { selectedValues }" >
86+ <span >{{ selectedValues.length }} items selected</span >
87+ </template >
88+ </a-combobox >
89+ ```
90+
91+ <Canvas >
92+ <Story id = " components-combobox--multiselect-custom-selected-tags" />
93+ </Canvas >
94+
5595## Combobox Input
5696
5797Clicking on the combobox input, as well as pressing ` Arrow Down ` when it's focused, will open the options panel.
You can’t perform that action at this time.
0 commit comments