Component that switches between two states.

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.



To import the component you just have to use this code below.

import { Switch } from '@marigold/components';


variantThe available variants of this component.
sizelargeThe available sizes of this component.


disabledbooleanfalseDisables the switch.
selectedbooleanfalseWith this prop you can set the switch selected.
widthstring | numberfullSets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
defaultSelectedbooleanfalseSet the default selected status of the switch.
readOnlybooleanfalseSet the switch to read only.



In this example you can see a simple <Switch> component with no properties.


Here you can see an already active <Switch>. It can be used when e.g. settings options are per default set to true.


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.