Tag group

import { useState } from 'react';
import { Tag, TagGroup } from '@arbol-ai/ui';

const RemovableExample = () => {
  const [labels, setLabels] = useState([
    { id: 'vip', name: 'VIP' },
    { id: 'new', name: 'New patient' },
    { id: 'whatsapp', name: 'Prefers WhatsApp' },
  ]);
  return (
    <TagGroup
      emptyLabel="No labels"
      items={labels}
      label="Contact labels"
      onRemove={(keys) => {
        setLabels((current) => current.filter((label) => !keys.has(label.id)));
      }}
    >
      {(label) => <Tag>{label.name}</Tag>}
    </TagGroup>
  );
};

<RemovableExample />

import { Tag, TagGroup } from '@arbol-ai/ui';

<TagGroup defaultSelectedKeys={['checkup']} label="Services" selectionMode="multiple">
  <Tag id="checkup">Annual checkup</Tag>
  <Tag id="vaccine">Vaccination</Tag>
  <Tag id="lab">Lab results</Tag>
</TagGroup>