---
components: ["TileGroup", "RadioTile"]
---

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

### Default

<TileGroup legend="Service pricing tiers">
  <RadioTile value="0" checked>
    Lite plan
  </RadioTile>
  <RadioTile value="1">
    Standard plan
  </RadioTile>
  <RadioTile value="2">
    Plus plan
  </RadioTile>
</TileGroup>

### Light variant

<TileGroup legend="Service pricing tiers">
  <RadioTile light value="0" checked>
    Lite plan
  </RadioTile>
  <RadioTile light value="1">
    Standard plan
  </RadioTile>
  <RadioTile light value="2">
    Plus plan
  </RadioTile>
</TileGroup>

### Disabled state

<TileGroup legend="Service pricing tiers">
  <RadioTile value="0" checked>
    Lite plan
  </RadioTile>
  <RadioTile value="1" disabled>
    Standard plan
  </RadioTile>
  <RadioTile value="2" disabled>
    Plus plan
  </RadioTile>
</TileGroup>