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

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

`RadioButton` provides a selection control that allows users to choose a single option from a set. It supports both individual and grouped usage, with options for horizontal and vertical layouts.

## Default

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

<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

Visually hide the legend while maintaining accessibility.

<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

Customize the legend text with additional content.

<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

Bind and update the selected value programmatically.

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

## Left-aligned label text

Position labels to the left of the radio buttons.

<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

Disable specific radio buttons to prevent selection.

<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

Display radio buttons in a vertical layout.

<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

Show a loading state for horizontal radio buttons.

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

## Skeleton (vertical)

Show a loading state for vertical radio buttons.

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