Radio
Used to select a single state from multiple options.
setup
Import the Radio component in a script tag.
Svelte Copy
import { Radio } from "@mgisolutions/design-system/svelte";
Basic usage
Basic usage ActionIcon
Demonstrate
Svelte Copy
//Javascript
let labels = ["Keto", "Vitamin", "Biotin", "Oil"];
let modelValueForList = "Keto";
//HTML
{#each labels as item}
<Radio label={item} value={item} bind:modelValue={modelValueForList} name="berg" />
{/each}
disabled
If set, then it disabled
Demonstrate
Svelte Copy
<Radio label="This is a label" disabled={true} name="single" value="keto" bind:modelValue="keto" />
Component Data
- props
- events
| Name | Description | Type | Default |
|---|---|---|---|
| label | The string used to show the radio | string | empty |
| name | To group list radio | string | empty |
| value | The value of the radio. | boolean | string | number | empty |
| modelValue | Model of the component | boolean | string | number | empty |
| disabled | If set, then it disabled | boolean | false |
| small | The size of the radio. | boolean | false |