Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/group.jsonUsage
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Group from "$lib/components/ui/group/index.js";
</script>
<Group.Root>
<Button>Button</Button>
<Group.Separator />
<Button>Button</Button>
</Group.Root>Accessibility
Group.Roothasrole="group".- Use Tab to navigate between the controls in the group.
- Use
aria-labeloraria-labelledbyto label the group.
<Group.Root aria-label="Media controls">
<Button variant="outline">Play</Button>
<Group.Separator />
<Button variant="outline">Pause</Button>
</Group.Root>Group vs ToggleGroup
- Use
Group.Rootwhen the controls perform actions. - Use
ToggleGroup.Rootwhen the controls toggle state.
API Reference
Group.Root
The root visually groups related controls with consistent connected styling.
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" \| "vertical" | "horizontal" |
<Group.Root>
<Button>Button 1</Button>
<Group.Separator />
<Button>Button 2</Button>
</Group.Root>Nest multiple groups to create complex layouts with spacing. See the nested groups example for more details.
<Group.Root>
<Group.Root>
<Button>1</Button>
<Group.Separator />
<Button>2</Button>
</Group.Root>
<Group.Root>
<Button>Previous</Button>
<Group.Separator />
<Button>Next</Button>
</Group.Root>
</Group.Root>Group.Separator
The separator visually divides controls within a group.
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" \| "vertical" | "vertical" |
<Group.Root>
<Button>Button 1</Button>
<Group.Separator />
<Button>Button 2</Button>
</Group.Root>Unlike shadcn’s ButtonGroup, Group.Separator is required between all controls, including outline buttons. It preserves the intended hierarchy and focus states.
Group.Text
Use this component for text such as labels or prefixes.
| Prop | Type | Default |
|---|---|---|
as | keyof HTMLElementTagNameMap | "span" |
<Group.Root>
<Group.Text>https://</Group.Text>
<Group.Separator />
<Input placeholder="example.com" />
</Group.Root>Render it as a label when the text names a control.
<Group.Root>
<Group.Text as="label" for="domain" aria-label="Domain">https://</Group.Text>
<Group.Separator />
<Input id="domain" placeholder="example.com" />
</Group.Root>