Switch
The <Switch> component allows the users to select between two states, e.g. on and off.
It consists of a visual selection indicator and a label.
Users may click or touch a Switch to toggle the state, or use the tab key to navigate to it and the space key to toggle it.
The styles are separated into some parts (container, label, thumb, track) that you can style in a custom variant.
Import
import { Switch } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disables the switch. |
selected | boolean | false | With this prop you can set the switch selected. |
width | string | number | full | Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width |
defaultSelected | boolean | false | Set the default selected status of the switch. |
readOnly | boolean | false | Set the switch to read only. |
Examples
Default
In this example you can see a simple <Switch> component with no properties.
Active
Here you can see an already active <Switch>. It can be used when e.g. settings options are per default set to true.
Disabled
In this mode the user can not change the status of the <Switch>. It can be used e.g. if you want to disable a certain setting for some users.
Disabled (active)
This mode can be used when an option is or was already active and there is a variable that does not allow the user switch to be moved from its "on" mode.