Switch

If you need to represent the switching between two states or on-off state.

The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.

Install

import {Switch} from '@xsolla/uikit';

Examples

Basic
Disabled
Disabled label
Fetching
Локализованый свитчер
With error
With error
Error message
With sublabel
With sublabel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum tortor a metus rutrum, consequat ultricies elit pellentesque. Donec ut magna pharetra, ornare orci non, tincidunt ex. Nunc nisl turpis, hendrerit ut ex eget, euismod pharetra metus. Phasellus et est sagittis, porttitor magna et, dapibus augue. Nullam neque mauris, interdum at lacus sit amet, faucibus rutrum neque. Donec fringilla dapibus lacinia.

Usage

<Switch
  name="basic-switch"
  input={{
    value: this.state.value,
    onChange: this.toggleValue
  }}
/>

With redux-form

<Field component={Switch} name="redux-switch" />

API

PropertyDescriptionTypeDefault
inputconfig for redux-form or basic switchobject{}
nameswitch namestringnull
labellabel for switchReact.Nodenull
sublabelsublabel text under labelReact.Nodenull
alignalign label for switchleft, rightright
tooltiptooltip for switchReact.Nodenull
disabledset the disabled status of switchboolfalse
fetchingset the fetching status of switchboolfalse