---
title: TileGroup
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/structure/TileGroup
---

### Usage

```js
import { TileGroup } from 'nr1'
```

### Examples

#### Basic tile group

```jsx
<TileGroup>
  <Tile onClick={console.log}>Tile 1</Tile>
  <Tile onClick={console.log}>Tile 2</Tile>
  <Tile onClick={console.log}>Tile 3</Tile>
</TileGroup>
```

#### Tile group with small gap type

```jsx
<TileGroup gapType={TileGroup.GAP_TYPE.SMALL}>
  <Tile onClick={console.log}>Tile 1</Tile>
  <Tile onClick={console.log}>Tile 2</Tile>
  <Tile onClick={console.log}>Tile 3</Tile>
</TileGroup>
```

#### Tile group with 3 columns

```jsx
<TileGroup tileWidth="4fr">
  {Array.from({ length: 12 }).map((_, index) => (
    <Tile onClick={console.log}>Tile {index + 1}</Tile>
  ))}
</TileGroup>
```

#### Tile group with custom tile width

```jsx
<TileGroup tileWidth={120}>
  {Array.from({ length: 12 }).map((_, index) => (
    <Tile onClick={console.log}>Tile {index + 1}</Tile>
  ))}
</TileGroup>
```

#### Selectable tiles

```jsx
<TileGroup selectionType={TileGroup.SELECTION_TYPE.SINGLE} tileWidth={120}>
  {Array.from({ length: 12 }).map((_, index) => (
    <Tile onClick={console.log}>Tile {index + 1}</Tile>
  ))}
</TileGroup>
```

#### Selectable tiles with default tile checked

```jsx
<TileGroup
  defaultValue="tile-0"
  selectionType={TileGroup.SELECTION_TYPE.SINGLE}
  tileWidth={120}
>
  {Array.from({ length: 12 }).map((_, index) => (
    <Tile value={`tile-${index}`} onClick={console.log}>
      Tile {index + 1}
    </Tile>
  ))}
</TileGroup>
```

#### Controlled selectable tiles

```jsx
class MyComponent extends React.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      checkedTile: 'tile-0',
    };
    this._onChange = this._onChange.bind(this);
  }
  _onChange(evt, tileValue) {
    this.setState({ checkedTile: tileValue });
  }
  render() {
    const { checkedTile } = this.state;
    return (
      <TileGroup
        value={checkedTile}
        onChange={this._onChange}
        tileWidth={120}
        selectionType={TileGroup.SELECTION_TYPE.SINGLE}
      >
        {Array.from({ length: 12 }).map((_, index) => (
          <Tile
            sizeType={Tile.SIZE_TYPE.SMALL}
            value={`tile-${index}`}
            key={index}
            onClick={console.log}
          >
            Tile {index + 1}
          </Tile>
        ))}
      </TileGroup>
    );
  }
}
```

#### Multi-select tiles

```jsx
<TileGroup selectionType={TileGroup.SELECTION_TYPE.MULTIPLE} tileWidth={120}>
  {Array.from({ length: 12 }).map((_, index) => (
    <Tile onClick={console.log}>Tile {index + 1}</Tile>
  ))}
</TileGroup>
```

#### Controlled multi-select tiles

```jsx
class MyComponent extends React.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      checkedTiles: [],
    };
    this._onChange = this._onChange.bind(this);
  }
  _onChange(evt, tileValue, checked) {
    this.setState((state) => {
      return {
        checkedTiles: checked
          ? [...state.checkedTiles, tileValue]
          : state.checkedTiles.filter((value) => value !== tileValue),
      };
    });
  }
  render() {
    const { checkedTiles } = this.state;
    return (
      <TileGroup
        value={checkedTiles}
        onChange={this._onChange}
        tileWidth={120}
        selectionType={TileGroup.SELECTION_TYPE.MULTIPLE}
      >
        {Array.from({ length: 12 }).map((_, index) => (
          <Tile
            sizeType={Tile.SIZE_TYPE.SMALL}
            value={`tile-${index}`}
            key={index}
            onClick={console.log}
          >
            Tile {index + 1}
          </Tile>
        ))}
      </TileGroup>
    );
  }
}
```

### Props

| `children` REQUIRED node                            | Tiles to display.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string                                  | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `defaultValue` string\|number\|string\[]\|number\[] | The initial tile that should be checked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `gapType` enum                                      | Size of the gap between tiles.TileGroup.GAP_TYPE.MEDIUMTileGroup.GAP_TYPE.SMALL                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `onChange` function                                 | Function called when a tile is checked or unchecked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `selectionType` enum                                | TileGroup.SELECTION_TYPE.MULTIPLE, TileGroup.SELECTION_TYPE.NONE, TileGroup.SELECTION_TYPE.SINGLE,                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `spacingType` enum\[]                               | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. TileGroup.SPACING_TYPE.EXTRA_LARGE, TileGroup.SPACING_TYPE.LARGE, TileGroup.SPACING_TYPE.MEDIUM, TileGroup.SPACING_TYPE.NONE, TileGroup.SPACING_TYPE.OMIT, TileGroup.SPACING_TYPE.SMALL,                                                                                                                                                                                 |
| `style` object                                      | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `testId` string                                     | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                                                                                                                                                                                                        |
| `tileWidth` string\|number                          | Represents the width of the columns. Columns always have the same width. It can be one of the following types: - `'YYpx'`: where `YY` is a number, represents the minimum width of the columns in pixels. When the tiles don't fit in the available width they will be wrapped in a new row. - `'YYfr'`: where `YY` is a number, it represents a fraction of the available width in a 12 fraction grid; for instance, a tile group with the tile width of `'6fr'`, will always render two columns (`12fr/6fr = 2`) where each tile will occupy 50% of the available width. |
| `value` string\|number\|string\[]\|number\[]        | The tile or tiles with the matching value will be checked. Can be a single value or an array of values when the selection type is `multiple`.If defined, it turns the component into a [controlled component](https://facebook.github.io/react/docs/forms.html).                                                                                                                                                                                                                                                                                                           |