Switch
If you need to represent the switching between two states or on-off state.
setup
Import the Switch component in a script tag.
Svelte Copy
import { Switch } from "@mgisolutions/design-system/svelte";
basic usage
Basic usage Switch
Demonstrate
Svelte Copy
<Switch label="This is a label" bind:value />
with icon
With an icon
Demonstrate
Svelte Copy
<Switch label="This is a label" bind:value withIcon />
disabled
Disabled state of Switch.
Demonstrate
Svelte Copy
<Switch label="This is a label" bind:value disabled />
Component Data
- props
- events
| Name | Description | Type | Default |
|---|---|---|---|
| value | The value of the switch. | boolean | string | number | empty |
| label | The string used to show the switch | string | empty |
| withIcon | If set, switch have icon | boolean | empty |
| disabled | If set, then it disabled | boolean | false |