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 and accessibility

Horizontal groups align input and trigger heights to their button size. Use the same size for every trigger in a group; fields follow that size. Add Group.Separator between controls to keep a single seam.

Compose Group.Root with controls as direct children. Put Group.Separator between each control, including outline buttons. Label the root with aria-label or aria-labelledby. Tab moves between controls normally. Separators own the visible dividers; Group only joins the control edges and keeps focused controls above their neighbors.

Use Group for actions and ToggleGroup for controls that select a state. Group does not add arrow-key navigation or selection.

Vertical

Root orientation defaults to horizontal. Use vertical with horizontal separators to stack controls.

Text and labels

Group.Text renders a div by default. Set as="label" and for when the prefix names an input. Text can also follow the control as a suffix.

With input

Nested groups

With popup

With menu

Composition

Text is optional. Controls keep their own sizes, variants, borders, shadows, focus rings, events and disabled states. Group does not replace a variant’s surface treatment. Hidden form inputs do not affect which visible control receives rounded ends. Nested Group.Root elements retain separate rounded ends with a gap between groups. Set class on any part to restyle it.

Root and Separator accept orientation="horizontal" or "vertical". Separator defaults to vertical and is hidden from assistive technology. Text accepts an HTML tag through as. Native attributes and event handlers pass through to each part.