Components
Code examples
<Switch />
Guidelines
Switches are a component you use to turn a given feature, service, or setting on or off. You can think of them as a slightly more explicit version of a checkbox.
Instructions for use
A switch should always have a label that indicates what it controls. The label should be static, and should not change based on what state the switch is in (on or off). For example, instead of having a dynamic label such as “Turn off push notification“ and “Turn on push notifications“, use “Send push notifications“ that should be shown regardless of whether the swtich is on or off.
Toggling a switch should give immediate effect, and the user should not need to click on a “Save“-button after toggling the Switch to see the effect.
Code
<Switch />
import { Switch } from "@vygruppen/spor-react";
Lets the user turn something on or off
Props
Name | Type | Required? | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | Default "md" | |
checked | boolean | ||
disabled | boolean | ||
invalid | boolean | ||
defaultChecked | boolean | ||
onCheckedChange | (details: CheckedChangeDetails) => void | ||
label | string | ||
name | string | ||
as | string | Effects the container for the Switch. |