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

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

## Default

<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
  <RadioTile value="lite">
    Lite plan
  </RadioTile>
  <RadioTile value="standard">
    Standard plan
  </RadioTile>
  <RadioTile value="plus">
    Plus plan
  </RadioTile>
</TileGroup>

## Reactive (one-way binding)

<FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />

## Reactive (two-way binding)

Binding to the `selected` prop is a more concise approach to managing state.

<FileSource src="/framed/RadioTile/RadioTileReactive" />

## Light variant

<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
  <RadioTile light value="lite">
    Lite plan
  </RadioTile>
  <RadioTile light value="standard">
    Standard plan
  </RadioTile>
  <RadioTile light value="plus">
    Plus plan
  </RadioTile>
</TileGroup>

## Disabled state

<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
  <RadioTile value="lite" disabled>
    Lite plan
  </RadioTile>
  <RadioTile value="standard">
    Standard plan
  </RadioTile>
  <RadioTile value="plus" disabled>
    Plus plan
  </RadioTile>
</TileGroup>