@neo4j-ndl/react/skills/ndl-react/components/selectable-tag.md

React implementation of Neo4j Design System

# SelectableTag

Import: `import { SelectableTag } from '@neo4j-ndl/react'`

## Props

### SelectableTag

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `badgeCount` | `number` |  |  | Number displayed in a badge after the content |
| `children` | `ReactNode` |  |  | The content of the tag |
| `isDisabled` | `boolean` |  | `false` | Whether the tag is disabled |
| `isSelected` | `boolean` | ✅ |  | Whether the tag is selected |
| `leadingVisual` | `ReactNode` |  |  | Icon to display before the content |
| `onClick` | `MouseEventHandler<HTMLButtonElement>` | ✅ |  | Callback fired when the tag is clicked |
| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small' \| 'x-small'` |  | `medium` | Size of the tag |

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { SelectableTag } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <SelectableTag
      isSelected={isSelected}
      onClick={() => setIsSelected(!isSelected)}
    >
      Selectable Tag
    </SelectableTag>
  );
};

export default Component;
```

### Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { SelectableTag } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-gap-token-8 n-items-center">
      <SelectableTag isSelected={false} isDisabled onClick={() => null}>
        Disabled unselected tag
      </SelectableTag>
      <SelectableTag isSelected={true} isDisabled onClick={() => null}>
        Disabled selected tag
      </SelectableTag>
    </div>
  );
};

export default Component;
```

### Sizes

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { SelectableTag } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [selected, setSelected] = useState<Record<string, boolean>>({});

  return (
    <div className="n-flex n-flex-row n-gap-token-8">
      <SelectableTag
        size="x-small"
        isSelected={selected['x-small'] ?? false}
        onClick={() =>
          setSelected((s) => ({ ...s, ['x-small']: !s['x-small'] }))
        }
      >
        X-Small
      </SelectableTag>
      <SelectableTag
        size="small"
        isSelected={selected['small'] ?? false}
        onClick={() => setSelected((s) => ({ ...s, ['small']: !s['small'] }))}
      >
        Small
      </SelectableTag>
      <SelectableTag
        size="medium"
        isSelected={selected['medium'] ?? false}
        onClick={() => setSelected((s) => ({ ...s, ['medium']: !s['medium'] }))}
      >
        Medium
      </SelectableTag>
      <SelectableTag
        size="large"
        isSelected={selected['large'] ?? false}
        onClick={() => setSelected((s) => ({ ...s, ['large']: !s['large'] }))}
      >
        Large
      </SelectableTag>
    </div>
  );
};

export default Component;
```

### Truncation

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { SelectableTag, Tooltip } from '@neo4j-ndl/react';
import { useState } from 'react';

const label =
  'This is a very very very long tag label that should be truncated';

const Component = () => {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <div style={{ maxWidth: 200 }}>
      <Tooltip type="simple">
        <Tooltip.Trigger hasButtonWrapper>
          <SelectableTag
            isSelected={isSelected}
            onClick={() => setIsSelected(!isSelected)}
            badgeCount={8}
          >
            {label}
          </SelectableTag>
        </Tooltip.Trigger>
        <Tooltip.Content>{label}</Tooltip.Content>
      </Tooltip>
    </div>
  );
};

export default Component;
```

### With Badge

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { SelectableTag } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <SelectableTag
      badgeCount={8}
      isSelected={isSelected}
      onClick={() => setIsSelected(!isSelected)}
    >
      Selectable Tag with badge
    </SelectableTag>
  );
};

export default Component;
```

### With Leading Icon

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { SelectableTag } from '@neo4j-ndl/react';
import { DatabasePlusIcon } from '@neo4j-ndl/react/icons';
import { useState } from 'react';

const Component = () => {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <SelectableTag
      isSelected={isSelected}
      leadingVisual={<DatabasePlusIcon />}
      onClick={() => setIsSelected(!isSelected)}
    >
      Selectable Tag with leading icon
    </SelectableTag>
  );
};

export default Component;
```