GroupItems

GroupItems presents a mixed pool of items and empty labeled zones. Users drag items from the common area into the correct groups. It uses @dnd-kit/react for drag and drop.

Import

import { GroupItems } from '@bside-tech/tbx-ui/components';

Example

<GroupItems
  entries={{
    animals: ['Cat', 'Dog'],
    plants: ['Oak', 'Rose', 'Tulip'],
  }}
/>

Props

Style

Tailwind v4 is available for customisations. Pass classes via the classNames prop, or override CSS variables for fine-grained control.

CSS Classes

CSS Variables

Scoped under .tbx-groupitems:

These feed into --exercise-action-bg, --exercise-action-border and --exercise-result-* used by ExerciseLayout.

Item labels use --exercise-layout-content-font-size.

Labels

Override labels via the labels prop. Fixed keys: items (common pool area, default "Items"), check, reset (buttons), results (e.g. "correct" in "3 / 5 correct"). Use group ids (keys from entries) to override zone headings—since groups are defined dynamically, any entry key can be used as a label key.

<GroupItems
  entries={{ animals: ['Cat', 'Dog'], plants: ['Oak'] }}
  labels={{
    items: 'Drag here',
    animals: 'Mammals',
    plants: 'Flora',
    check: 'Verify',
    reset: 'Reset',
    results: 'correct',
  }}
/>

Hook

Use useGroupItemsExercise for custom group interfaces. Pass items and groups derived from your entries:

import { useGroupItemsExercise } from '@bside-tech/tbx-ui/hooks';

const entries = { animals: ['Cat', 'Dog'], plants: ['Oak'] };
const items = Object.entries(entries).flatMap(([group, labels]) =>
  labels.map((label) => ({ label, group }))
);
const groups = Object.keys(entries).map(id => ({ id, label: id }));

const { itemsByGroup, moveItem, solution, isCorrect, check, reset } = useGroupItemsExercise({
  items,
  groups,
  checkOn: 'manual',
});