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

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

`SelectableTile` provides a tile-based selection interface that allows users to select multiple options. It supports various states and includes built-in keyboard navigation and accessibility features.

## Multi-selectable tiles

Group multiple selectable tiles together for multi-selection scenarios.

<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

Use the light variant for light backgrounds.

<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

Disable tiles to prevent interaction.

<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>