Skip to content

Commit 63212a7

Browse files
committed
docs: document maxTags in storybook
1 parent 19cbb38 commit 63212a7

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

src/stories/Combobox.mdx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff 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

5797
Clicking on the combobox input, as well as pressing `Arrow Down` when it's focused, will open the options panel.

0 commit comments

Comments
 (0)