docs(radio-button): add reactive example

This commit is contained in:
Eric Liu 2020-11-22 09:25:05 -08:00
commit bc29d9ee0d
2 changed files with 42 additions and 0 deletions

View file

@ -17,6 +17,12 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
</RadioButtonGroup>
</FormGroup>
### Programmatic usage
Bind the selected value using the `selected` prop.
<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />
### Label text aligned left
<FormGroup legendText="Storage tier (disk)">

View file

@ -0,0 +1,36 @@
<script>
import {
ButtonSet,
Button,
FormGroup,
RadioButtonGroup,
RadioButton,
} from "carbon-components-svelte";
let plan = "standard";
</script>
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup bind:selected="{plan}">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<ButtonSet>
{#each ['free', 'standard', 'pro'] as value}
<Button
on:click="{() => {
plan = value;
}}"
>
Select "{value}"
</Button>
{/each}
</ButtonSet>
<div style="margin: var(--cds-layout-01) 0">
Selected plan:
<strong>{plan}</strong>
</div>