Simple Switch

Calling the component

<SSwitch />

Size

The size of the switch can be changed by passing the size prop to the component. The default size is medium.

Small

<SSwitch size="small" />

Medium

<SSwitch size="medium" />

Large

<SSwitch size="large" />

Color

The color of the switch can be changed by passing the color prop to the component. The default color is blue.

blue

<SSwitch color="blue" />

green

<SSwitch color="green" />

Checked

The checked state of the switch can be changed by passing the checked prop to the component. The default checked state is false.

Checked

<SSwitch checked />

Unchecked

<SSwitch />

Disabled

The disabled state of the switch can be changed by passing the disabled prop to the component. The default disabled state is false.

Disabled

<SSwitch disabled />

Enabled

<SSwitch />

On Change

The onChange prop can be used to handle the change event of the switch.

<SSwitch onChange={(e) => console.log(e.target.checked)} />