Skip to content

Commit 90af19f

Browse files
committed
docs(Group): document batch operations and tri-state slot props
1 parent 39e1973 commit 90af19f

1 file changed

Lines changed: 41 additions & 0 deletions

File tree

  • apps/docs/src/pages/components/providers

apps/docs/src/pages/components/providers/group.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,47 @@ Button items in a group with shared multi-selection state — toggling any item
3535

3636
:::
3737

38+
## Features
39+
40+
### Batch Operations
41+
42+
The default slot exposes `selectAll`, `unselectAll`, and `toggleAll` methods for operating on all items at once:
43+
44+
```vue
45+
<template>
46+
<Group.Root v-model="selected">
47+
<template #default="{ selectAll, unselectAll, toggleAll, isAllSelected, isMixed }">
48+
<button @click="toggleAll">
49+
{{ isAllSelected ? 'Deselect All' : 'Select All' }}
50+
</button>
51+
52+
<Group.Item v-for="item in items" :key="item" :value="item">
53+
{{ item }}
54+
</Group.Item>
55+
</template>
56+
</Group.Root>
57+
</template>
58+
```
59+
60+
### Tri-State
61+
62+
The slot props `isAllSelected`, `isNoneSelected`, and `isMixed` reflect the aggregate selection state — useful for driving an "indeterminate" checkbox:
63+
64+
```vue
65+
<template>
66+
<Group.Root v-model="selected">
67+
<template #default="{ isAllSelected, isMixed, toggleAll }">
68+
<input
69+
type="checkbox"
70+
:checked="isAllSelected"
71+
:indeterminate="isMixed"
72+
@change="toggleAll"
73+
/>
74+
</template>
75+
</Group.Root>
76+
</template>
77+
```
78+
3879
## Anatomy
3980

4081
```vue Anatomy playground

0 commit comments

Comments
 (0)