RadioButton

Source code
Table of Contents

Usage

Default

Storage tier (disk) 
<script>
  import {
    FormGroup,
    RadioButtonGroup,
    RadioButton,
  } from "carbon-components-svelte";
</script>

<FormGroup legendText="Storage tier (disk)">
  <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>
</FormGroup>

Label text aligned left

Storage tier (disk) 
<script>
  import {
    FormGroup,
    RadioButtonGroup,
    RadioButton,
  } from "carbon-components-svelte";
</script>

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

Vertical orientation

Storage tier (disk) 
<script>
  import {
    FormGroup,
    RadioButtonGroup,
    RadioButton,
  } from "carbon-components-svelte";
</script>

<FormGroup legendText="Storage tier (disk)">
  <RadioButtonGroup orientation="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>
</FormGroup>

Skeleton

Storage tier (disk) 
<script>
  import {
    FormGroup,
    RadioButtonGroup,
    RadioButtonSkeleton,
  } from "carbon-components-svelte";
</script>

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

Skeleton (vertical orientation)

Storage tier (disk) 
<script>
  import {
    FormGroup,
    RadioButtonGroup,
    RadioButtonSkeleton,
  } from "carbon-components-svelte";
</script>

<FormGroup legendText="Storage tier (disk)">
  <RadioButtonGroup orientation="vertical">
    <RadioButtonSkeleton />
    <RadioButtonSkeleton />
    <RadioButtonSkeleton />
  </RadioButtonGroup>
</FormGroup>
Table of Contents