---
components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
---

<script>
  import { RadioButton, RadioButtonSkeleton, RadioButtonGroup, Tooltip } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

### Default

<RadioButtonGroup selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>

### With legend text

<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>

### Legend text slot

Use the named "legendText" slot to customize the legend text.

<RadioButtonGroup selected="standard">
  <div slot="legendText" style="display: flex">
    Storage tier (disk)
    <Tooltip tooltipBodyId="tooltip-body">
      <p id="tooltip-body">
        Storage tiers may vary based on geolocation.
      </p>
    </Tooltip>
  </div>
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>

### Programmatic usage

Bind the selected value using the `selected` prop.

<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />

### Left-aligned label text

<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>

### Disabled buttons

<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
  <RadioButton disabled labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton disabled labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>

### Vertical orientation

<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>

### Skeleton

<RadioButtonGroup legendText="Storage tier (disk)">
  <RadioButtonSkeleton />
  <RadioButtonSkeleton />
  <RadioButtonSkeleton />
</RadioButtonGroup>

### Skeleton (vertical)

<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
  <RadioButtonSkeleton />
  <RadioButtonSkeleton />
  <RadioButtonSkeleton />
</RadioButtonGroup>