---
components: ["SelectableTile"]
---

<script>
  import { SelectableTile } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Multi-selectable tiles

<div role="group" aria-label="selectable tiles">
  <SelectableTile selected>
    Multi-select Tile
  </SelectableTile>
  <SelectableTile selected>
    Multi-select Tile
  </SelectableTile>
  <SelectableTile>
    Multi-select Tile
  </SelectableTile>
</div>

## Light variant

<div role="group" aria-label="selectable tiles">
  <SelectableTile light selected>
    Multi-select Tile
  </SelectableTile>
  <SelectableTile light selected>
    Multi-select Tile
  </SelectableTile>
  <SelectableTile light>
    Multi-select Tile
  </SelectableTile>
</div>

## Disabled state

<div role="group" aria-label="selectable tiles">
  <SelectableTile selected>
    Multi-select Tile
  </SelectableTile>
  <SelectableTile disabled>
    Multi-select Tile
  </SelectableTile>
  <SelectableTile disabled>
    Multi-select Tile
  </SelectableTile>
</div>