Group

Installation

pnpm dlx @mielui/svelte add group

npx @mielui/svelte add group

yarn dlx @mielui/svelte add group

bunx @mielui/svelte add group

Usage

Put controls directly inside Group.Root with a Group.Separator between each pair, including outline buttons; separators draw the seams. Name the group with aria-label or aria-labelledby. Tab moves between controls as usual.

<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Group from '@mielui/svelte/components/group';
</script>

<Group.Root aria-label="Page navigation">
    <Button variant="outline">Previous</Button>
    <Group.Separator />
    <Button variant="outline">Next</Button>
</Group.Root>

In a horizontal group, inputs and text match the height of the buttons. Give every button in a group the same size.

Use Group for actions and Toggle Group for controls that select a state. Group adds no arrow-key navigation or selection.

Composition

Controls keep their own sizes, variants, focus rings, events, and disabled states. Joined controls share one hairline seam and flat inner corners; the outer ends keep the control radius, and a focused control sits above its neighbors. Filled buttons keep their ring. Hidden form inputs do not affect which visible control gets the rounded ends.

Root and Separator take orientation, horizontal or vertical. Root defaults to horizontal and Separator to vertical; Separator is hidden from assistive technology. Text takes an element name through as. Every part passes native attributes, class, and event handlers to its element.