Multiple Selection

The purpose of this guide is to provide clear instructions and guidelines for selecting the appropriate method of multiple selection within your design system. The guide will outline the different possibilities for multiple selection, explain their differences, and provide examples and recommendations for when to use each type.

Different possibilities for multiple selection:

• Checkbox Group
• Tag Field
• Tag Group
• SelectList

So let us explain each different possibility for multiple selection:

Checkbox Group

Checkbox Group is a type of multiple selection interfaces that presents options as checkboxes. User can Select Multiple options by checking the corresponding checkboxes.

It provides a familiar and straightforward interface for selecting multiple options.

When to use ?

• Use CheckboxGroup when the number of options is moderate to large, typically more than 10-15 options.
• Use CheckboxGroup when the selected options do not need to be visible within the selection interface.
• CheckboxGroup is useful when the primary focus is on selecting options rather than displaying the selected choices.

Examples

Selected values: 

import { useState } from 'react';import { Checkbox, CheckboxGroup } from '@marigold/components';export default () => {  const [selected, setSelected] = useState<string[]>([]);  return (    <>      <CheckboxGroup        label="Choose your toppings:"        onChange={setSelected}        description="Just click on the options"      >        <Checkbox value="ham" label="🐖 Ham" />        <Checkbox value="beef" disabled label="🐄 Beef (out of stock)" />        <Checkbox value="tuna" label="🐟 Tuna" />        <Checkbox value="tomatos" label="🍅 Tomatos" />        <Checkbox value="onions" label="🧅 Onions" />        <Checkbox value="pineapple" label="🍍 Pineapple" />      </CheckboxGroup>      <hr />      <pre>Selected values: {selected.join(', ')}</pre>    </>  );};

Tag Field

<TagField> is a type of multiple selection interface that displays options in a dropdown with a searchable list and shows selected items as tags.

It allows users to choose multiple options from a filterable list and provides a clear overview of selected items as removable tags.

When to use ?

• Use <TagField> when the number of options is large and users benefit from searching/filtering.
• <TagField> is suitable when selected options need to be visible within the selection interface as tags.
• It provides a comprehensive view of selected items while keeping the full option list in a dropdown.

Examples

import { TagField } from '@marigold/components';export default () => (  <TagField    label="Ticket Categories"    placeholder="Select categories..."    disabledKeys={['backstage']}  >    <TagField.Option id="general">General Admission</TagField.Option>    <TagField.Option id="vip">VIP Experience</TagField.Option>    <TagField.Option id="backstage">Backstage Pass</TagField.Option>    <TagField.Option id="early">Early Bird Special</TagField.Option>  </TagField>);

TagGroup

TagGroup is a type of multiple selection interface that allows users to select multiple options and displays the selected options as tags.

It is useful when the number of options is relatively small, and the selected options need to be visible at all times.

When to use ?

• Use TagGroup when the number of options is limited, typically up to 10-15 options.
• Use TagGroup when the selected options need to be visible to the user at all times.
• TagGroup is well-suited for situations where space is a concern and displaying selected options as tags provides a clear representation.

Examples

import { useState } from 'react';import { Tag } from '@marigold/components';export default () => {  const [selected, setSelected] = useState(new Set(['parking']));  return (    <>      <Tag.Group        label="Amenities"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected as any}      >        <Tag id="laundry">Laundry</Tag>        <Tag id="fitness">Fitness center</Tag>        <Tag id="parking">Parking</Tag>        <Tag id="pool">Swimming pool</Tag>        <Tag id="breakfast">Breakfast</Tag>      </Tag.Group>      <p>Current selection (controlled): {[...selected].join(', ')}</p>    </>  );};

SelectList

The SelectList shows a list of interactive elements with which you can select several elements at the same time.

It is useful if you want to have a list in which you can select more items. It combines checkboxes with a list view, which lets it differ from the other examples like the Multiselect Recipe.

When to use ?

• Use SelectList when your list items may contain interactive elements such as buttons, checkboxes, menus, etc. within them.
• Use SelectList when you have a large amout of options to choose from.
• Use SelectList if you need to view the other options aswell as the selected ones.

Examples

import { SelectList } from '@marigold/components';const paymentMethods = [  { id: 'credit', name: 'Credit Card' },  { id: 'debit', name: 'Debit Card' },  { id: 'transfer', name: 'Bank Transfer' },  { id: 'paypal', name: 'PayPal' },  { id: 'cash', name: 'Cash' },];export default () => (  <SelectList    selectionMode="multiple"    aria-label="Payment Methods"    items={paymentMethods}  >    {(item: { id: string; name: string }) => (      <SelectList.Item id={item.id}>{item.name}</SelectList.Item>    )}  </SelectList>);