Selectable Tile

A Tile that is selectable. Tiles can contain logos, icons, or text only.

Example

Live Editor

function mySelectableTiles() { const items = [ { id: '1', name: 'Tiktok', badge: { iconName: 'Check', label: 'Enabled', color: 'primary' }, image: { url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png' }, disabled: true }, { id: '2', name: 'Apple Search Ads', iconName: 'PlatformIosFilled', badge: { iconName: 'Check', label: 'Enabled', color: 'primary' } }, { id: '3', name: 'Random App', app: { appId: "com.adjust.insights", appName: "adjust Insights", size: "small" }, badge: { iconName: 'Check', label: 'Enabled', color: 'primary' }, tooltipProps: { content: 'This is a tooltip', position: 'top' } }, { id: '4', name: 'SelectableTile', image: { }, badge: { iconName: 'Check', label: 'Enabled', color: 'primary' } }, { id: '5', name: 'No Badge SelectableTile', app: { iconName: 'Check', label: 'Enabled', color: 'primary' }, disabled: true }, { id: '6', name: 'Some App', image: { url: 'https://www.svgrepo.com/show/19461/url-link.svg', altText: 'Sample image', style: { color: 'blue' } }, badge: { iconName: 'Cross', label: 'Negative', color: 'negative' } }, { id: '7', name: 'Google Play App', iconName: 'PlatformGooglePlayFilled' }, { id: '8', name: 'Yahoo Japan Corporation (Zホールディングス) Japan Search Ads', image: { url: 'https://media.buyee.jp/campaign/shippingfeeoff210324/assets/img/logo_y_shopping.png', altText: 'Sample image', style: { color: 'blue' } }, badge: { iconName: 'Cross', label: 'Negative', color: 'negative' } }, { id: '9', name: 'Google Ads', image: { url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png', altText: 'Sample image', style: { color: 'blue' } } } ] const [selectedTiles, setSelectedTiles] = useState(); const type = 'checkbox'; const onSelect = (id) => { const selectedIDs = [...selectedTiles]; if (type === 'radio') { setSelectedTiles(id); return; } if (!selectedIDs.includes(id)) { selectedIDs.push(id); } else { selectedIDs.splice(selectedIDs.indexOf(id), 1); } setSelectedTiles(selectedIDs); } return ( <SelectableTile items={items} selectedItems={selectedTiles} spacing={8} onChange={onSelect} type={type} columnSpan={4} /> ) }

function mySelectableTiles() {
  const items = [
      {
        id: '1',
        name: 'Tiktok',
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        },
        image: {
          url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png'
        },
        disabled: true
      },
      {
        id: '2',
        name: 'Apple Search Ads',
        iconName: 'PlatformIosFilled',
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        }
      },
       {
        id: '3',
        name: 'Random App',
        app: {
          appId: "com.adjust.insights",
          appName: "adjust Insights",
          size: "small"
        },
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        },
        tooltipProps: {
          content: 'This is a tooltip',
          position: 'top'
        }
      },
      {
        id: '4',
        name: 'SelectableTile',
        image: {

        },
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        }
      },
       {
        id: '5',
        name: 'No Badge SelectableTile',
        app: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        },
        disabled: true
      },
      {
        id: '6',
        name: 'Some App',
        image: {
          url: 'https://www.svgrepo.com/show/19461/url-link.svg',
          altText: 'Sample image',
          style: {
            color: 'blue'
          }
        },
        badge: {
          iconName: 'Cross',
          label: 'Negative',
          color: 'negative'
        }
      },
      {
        id: '7',
        name: 'Google Play App',
        iconName: 'PlatformGooglePlayFilled'
      },
      {
        id: '8',
        name: 'Yahoo Japan Corporation (Zホールディングス) Japan Search Ads',
        image: {
          url: 'https://media.buyee.jp/campaign/shippingfeeoff210324/assets/img/logo_y_shopping.png',
          altText: 'Sample image',
          style: {
            color: 'blue'
          }
        },
        badge: {
          iconName: 'Cross',
          label: 'Negative',
          color: 'negative'
        }
      },
      {
        id: '9',
        name: 'Google Ads',
        image: {
          url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png',
          altText: 'Sample image',
          style: {
            color: 'blue'
          }
        }
      }
    ]

  const [selectedTiles, setSelectedTiles] = useState();
  const type = 'checkbox';
  
  const onSelect = (id) => {
    const selectedIDs = [...selectedTiles];
    
    if (type === 'radio') {
      setSelectedTiles(id);
      return;
    }
    
    if (!selectedIDs.includes(id)) {
      selectedIDs.push(id); 
    } else {
       selectedIDs.splice(selectedIDs.indexOf(id), 1);
    }
    setSelectedTiles(selectedIDs);
  }

  return (
    <SelectableTile
      items={items}
      selectedItems={selectedTiles}
      spacing={8}
      onChange={onSelect}
      type={type}
      columnSpan={4}
    />
  )
}

Result

Loading...

Variants

Selection Mode

Selectable Tiles allow two different modes: checkbox-like multi selection, and radio-like single selection. There must always be at least 2 tiles to be used within a grid.

• The component allows radio-like single selection by adding type='checkbox' as following example.

Live Editor

function mySelectableTiles() { const items = [ { id: 'a', name: 'Tiktok', badge: { iconName: 'Check', label: 'Enabled', color: 'primary' }, image: { url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png' } }, { id: 'b', name: 'Apple Search Ads', iconName: 'PlatformIosFilled', badge: { iconName: 'Check', label: 'Enabled', color: 'primary' } }, { id: 'c', name: 'Random App', app: { appId: "com.adjust.insights", appName: "adjust Insights", size: "small" } } ] const [selectedTiles, setSelectedTiles] = useState(); const onSelect = (id) => { const selectedIDs = [...selectedTiles]; if (!selectedIDs.includes(id)) { selectedIDs.push(id); } else { selectedIDs.splice(selectedIDs.indexOf(id), 1); } setSelectedTiles(selectedIDs); } return ( <> <SelectableTile items={items} selectedItems={selectedTiles} spacing={8} onChange={onSelect} type="checkbox" columnSpan={4} /> </> ) }

function mySelectableTiles() {
  const items = [
      {
        id: 'a',
        name: 'Tiktok',
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        },
        image: {
          url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png'
        }
      },
      {
        id: 'b',
        name: 'Apple Search Ads',
        iconName: 'PlatformIosFilled',
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        }
      },
      {
        id: 'c',
        name: 'Random App',
        app: {
          appId: "com.adjust.insights",
          appName: "adjust Insights",
          size: "small"
        }
      }
    ]

  const [selectedTiles, setSelectedTiles] = useState();

  const onSelect = (id) => {
    const selectedIDs = [...selectedTiles];
    if (!selectedIDs.includes(id)) {
      selectedIDs.push(id);
    } else {
       selectedIDs.splice(selectedIDs.indexOf(id), 1);
    }
    setSelectedTiles(selectedIDs);
  }

  return (
    <>
      <SelectableTile
        items={items}
        selectedItems={selectedTiles}
        spacing={8}
        onChange={onSelect}
        type="checkbox"
        columnSpan={4}
      />
    </>
  )
}

Result

Loading...

• The component allows radio-like single selection by adding type='radio' as following example.

Live Editor

function mySelectableTiles() { const items = [ { id: 'a1', name: 'Tiktok', badge: { iconName: 'Check', label: 'Enabled', color: 'primary' }, image: { url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png' } }, { id: 'b1', name: 'Apple Search Ads', iconName: 'PlatformIosFilled', badge: { iconName: 'Check', label: 'Enabled', color: 'primary' } }, { id: 'c1', name: 'Random App', app: { appId: "com.adjust.insights", appName: "adjust Insights", size: "small" } } ] const [selectedTile, setSelectedTile] = useState(); return ( <> <SelectableTile items={items} selectedItems={selectedTile} spacing={8} onChange={setSelectedTile} type="radio" columnSpan={4} /> </> ) }

function mySelectableTiles() {
  const items = [
      {
        id: 'a1',
        name: 'Tiktok',
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        },
        image: {
          url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png'
        }
      },
      {
        id: 'b1',
        name: 'Apple Search Ads',
        iconName: 'PlatformIosFilled',
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        }
      },
      {
        id: 'c1',
        name: 'Random App',
        app: {
          appId: "com.adjust.insights",
          appName: "adjust Insights",
          size: "small"
        }
      }
    ]

  const [selectedTile, setSelectedTile] = useState();

  return (
    <>
      <SelectableTile
        items={items}
        selectedItems={selectedTile}
        spacing={8}
        onChange={setSelectedTile}
        type="radio"
        columnSpan={4}
      />
    </>
  )
}

Result

Loading...

Size

There are two sizes available for selectable tiles: small and medium (default).

info

Small tiles can not show a status badge.

Live Editor

function mySelectableTiles() { const getItems = (size) => Array.from({length: 3}, (_, index) => ({ id: `${size}-${index}`, name: size === 'md' ? 'Medium Tile' : 'Small Tile', iconName: index === 1 ? 'PlatformIosFilled' : undefined, image: index === 0 ? { url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png' } : undefined, badge: { iconName: 'Check', label: 'Enabled', color: 'primary' } }) ) const [selectedMdTile, setSelectedMdTile] = useState(getItems('md')[0].id); const [selectedSmTile, setSelectedSmTile] = useState(getItems('sm')[1].id); return ( <> <SelectableTile items={getItems('md')} selectedItems={selectedMdTile} onChange={setSelectedMdTile} spacing={8} columnSpan={4} /> <SelectableTile items={getItems('sm')} selectedItems={selectedSmTile} onChange={setSelectedSmTile} spacing={8} columnSpan={4} size='small' /> </> ) }

function mySelectableTiles() {
  const getItems = (size) => Array.from({length: 3}, (_, index) => 
    ({
      id: `${size}-${index}`, 
      name: size === 'md' ? 'Medium Tile' : 'Small Tile',
      iconName: index === 1 ? 'PlatformIosFilled' : undefined,
      image: index === 0 ? {
          url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png'
        } : undefined,
      badge: {
        iconName: 'Check',
        label: 'Enabled',
        color: 'primary'
      }
    })
  )  
  
  const [selectedMdTile, setSelectedMdTile] = useState(getItems('md')[0].id);
  const [selectedSmTile, setSelectedSmTile] = useState(getItems('sm')[1].id);

  return (
    <>
      <SelectableTile
        items={getItems('md')}
        selectedItems={selectedMdTile}
        onChange={setSelectedMdTile}
        spacing={8}
        columnSpan={4}
      />

      <SelectableTile
        items={getItems('sm')}
        selectedItems={selectedSmTile}
        onChange={setSelectedSmTile}
        spacing={8}
        columnSpan={4}
        size='small'
      />
    </>
  )
}

Result

Loading...

Tooltip

You can display a tooltip for each SelectableTile item.

To display a tooltip you need to add to your item object tooltipProps property with a content.

The Tooltip position is set to auto by default and can be customized by passing position like below example.

Live Editor

function mySelectableTiles() { const items = [ { id: 'a', name: 'Tiktok', badge: { iconName: 'Check', label: 'Enabled', color: 'primary' }, image: { url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png' }, tooltipProps: { content: 'This is a tooltip', position: 'top' } }, { id: 'b', name: 'Apple Search Ads', iconName: 'PlatformIosFilled', badge: { iconName: 'Check', label: 'Enabled', color: 'primary' }, tooltipProps: { content: 'This is a tooltip', zIndex: -1 } }, { id: 'c', name: 'Random App', app: { appId: "com.adjust.insights", appName: "adjust Insights", size: "small" }, badge: { iconName: 'Check', label: 'Enabled', color: 'primary' }, tooltipProps: { content: 'This is a tooltip', position: 'top' } } ] const [selectedTiles, setSelectedTiles] = useState(); const type = 'checkbox'; const onSelect = (id) => { const selectedIDs = [...selectedTiles]; if (type === 'radio') { setSelectedTiles(id); return; } if (!selectedIDs.includes(id)) { selectedIDs.push(id); } else { selectedIDs.splice(selectedIDs.indexOf(id), 1); } setSelectedTiles(selectedIDs); } return ( <SelectableTile items={items} selectedItems={selectedTiles} spacing={8} onChange={onSelect} type={type} columnSpan={4} /> ) }

function mySelectableTiles() {
  const items = [
      {
        id: 'a',
        name: 'Tiktok',
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        },
        image: {
          url: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1200px-TikTok_logo.svg.png'
        },
        tooltipProps: {
          content: 'This is a tooltip',
          position: 'top'
        }
      },
      {
        id: 'b',
        name: 'Apple Search Ads',
        iconName: 'PlatformIosFilled',
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        },
        tooltipProps: {
          content: 'This is a tooltip',
          zIndex: -1
        }
      },
       {
        id: 'c',
        name: 'Random App',
        app: {
          appId: "com.adjust.insights",
          appName: "adjust Insights",
          size: "small"
        },
        badge: {
          iconName: 'Check',
          label: 'Enabled',
          color: 'primary'
        },
        tooltipProps: {
          content: 'This is a tooltip',
          position: 'top'
        }
      }
    ]

  const [selectedTiles, setSelectedTiles] = useState();
  const type = 'checkbox';

  const onSelect = (id) => {
    const selectedIDs = [...selectedTiles];

    if (type === 'radio') {
      setSelectedTiles(id);
      return;
    }

    if (!selectedIDs.includes(id)) {
      selectedIDs.push(id);
    } else {
       selectedIDs.splice(selectedIDs.indexOf(id), 1);
    }
    setSelectedTiles(selectedIDs);
  }

  return (
    <SelectableTile
      items={items}
      selectedItems={selectedTiles}
      spacing={8}
      onChange={onSelect}
      type={type}
      columnSpan={4}
    />
  )
}

Result

Loading...

Props

SelectableTile

Name	Type	Default
type * Type of radio or checkbox	"checkbox" | "radio"	—
selectedItems * this support single and multiple selected items	string | string[]	—
items * Array of SelectableTileItems	SelectableTileItemProps[]	—
size A tile size	"small" | "medium"	"medium"
spacing A number value to set spacing between tiles	number	8
onChange Onchange function	((id: string) => void)	—
columnSpan equal space between tiles	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12	4
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.