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

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

## Default

The `name` prop set on `RadioButtonGroup` is passed to the individual `RadioButton` inputs.

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

## Hidden legend

It's recommended that you provide a legend for accessibility.

Use `hideLegend` to visually hide the legend text.

<RadioButtonGroup hideLegend legendText="Storage tier (disk)" name="plan-legend" 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 name="plan-legend-slot" selected="standard">
  <div slot="legendText" style:display="flex">
    Storage tier (disk)
    <Tooltip>
      <p>
        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>

## Reactive example

Use the `selected` prop to bind and update the selected value.

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

## Left-aligned label text

<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-left-aligned" 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)" name="plan-disabled" 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)" name="plan-vertical" 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>