Markdown:

Components

SortableGroup

Connects two or more Sortable lists so items can move between them.

Todo

Scope sortable docs
Write copy

Doing

Build examples

Done

Verify API

Usage

Wrap two or more Sortable children to connect them.

Svelte

<SortableGroup {...props}>
  <Sortable {...props} />
  <Sortable {...props} />
</SortableGroup>

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte

<div class="whole" {...rest} role="group">
  {children}
</div>

Props

Name	Type	Default	Description
`children*`	`Snippet`	-	Child content; render two or more `<Sortable>` children inside it
`group`	`SortableGroupController`	-	Reuses an external controller created by `createSortableGroup(...)`; omitted groups create and provide their own controller
`duration`	`number`	`300`	Group motion duration in milliseconds; reduced motion resolves the duration to `0`
`easing`	`EasingFunction`	`cubicOut`	Group motion easing function
`styling`	`SVSClass`	-	Styling inherited by neutral descendant Sortables when `group` is omitted
`variant`	`SVSVariant`	`NEUTRAL`	Variant inherited by neutral descendant Sortables when `group` is omitted

* required. Other <div> attributes are passed via rest props; class is merged onto the group.

SortableGroup is children-only: render two or more <Sortable> children inside it. Descendant Sortables without a group prop resolve the shared controller from context. When group is omitted, neutral descendant Sortables inherit the group's variant and styling; when group is provided, that controller's own presentation is used.

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-sortable-group

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Group (whole <div>): role="group".

Name the group with aria-label or aria-labelledby through rest props.

Each child Sortable provides keyboard reordering within its own list, and connected lists share the group controller's live-region announcements; see Sortable accessibility for the keyboard model.

Exports

Types

TypeScript

interface SortableGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
  children: Snippet;
  group?: SortableGroupController; // reuse an externally created controller
  duration?: number; // (300) group motion duration
  easing?: EasingFunction; // (cubicOut) group motion easing
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other div attributes are passed to the group <div> via ...rest; `class` is merged
  // aria-label / aria-labelledby name the group
}
type SortableGroupReqdProps = "children";
type SortableGroupBindProps = never;

Others

See Sortable for createSortableGroup and SortableGroupController.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Todo

Scope sortable docs
Write copy

Doing

Build examples

Done

Verify API

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like

Planned

Brief
Mockup
Copy

Shipped

Prototype
QA

Clone Mode

Palette

Heading
Image
Button

Canvas

Intro text