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

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

`RadioTile` provides a selectable tile interface for choosing a single option from a set. It supports both individual and grouped usage, with options for light and disabled states.

## Default

Create a group of radio tiles with a shared name and legend.

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

Update the selected value using the `select` event.

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

## Reactive (two-way binding)

Bind to the `selected` prop for simpler state management.

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

## Light variant

Use the light variant for light backgrounds.

<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

Disable specific tiles to prevent selection.

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