carbon-components-svelte/docs/src/pages/components/SelectableTile.svx at 5f5293a5b9e9f36190dd02b1dd54c2f1412b4782 · carbon-design-system/carbon-components-svelte · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
---
components: ["SelectableTile", "SelectableTileGroup"]
---

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

### Multi-selectable tiles

<SelectableTileGroup legend="Select the options you require">
  <SelectableTile title="Option 1" selected>
    Option 1
  </SelectableTile>
  <SelectableTile title="Option 2" selected>
    Option 2
  </SelectableTile>
  <SelectableTile title="Option 3">
    Option 3
  </SelectableTile>
    <SelectableTile light title="Option 4">
    Option 4 (light variant)
  </SelectableTile>
</div>

### Multi-selectable tiles with light variant

<SelectableTileGroup  legend="Select the options you require">
  <SelectableTile light title="Option 1" selected>
    Option 1
  </SelectableTile>
  <SelectableTile light title="Option 2" selected>
    Option 2
  </SelectableTile>
  <SelectableTile light title="Option 3">
    Option 3
  </SelectableTile>
    <SelectableTile light title="Option 4">
    Option 4
  </SelectableTile>
</div>