Switch

The Switch component can be used to toggle between two states, on and off.

Import

To use the Switch component, import it from @vivakits/react-components.

import { VKSwitch } from "@vivakits/react-components";

Basic Usage

There are some required props to use the Switch component. The onToggle and isChecked props are required to handle the toggle event. The isChecked prop is used to set the initial state of the switch. The onToggle prop is used to handle the toggle event.

Variant

The Switch component offers multiple styling options through the variant prop. It comes with three built-in variants: default, android, and iOS. If you don't specify a variant, the switch will use the default style.

Color

The Switch component comes with color property to change the color of the switch.

Size

The Switch component comes with 5 different sizes: xs, sm, md, lg, and xl. The default size is md.

Label

The Switch component can display a label using the label prop. The label will be placed on the bottom of the switch by default.

Label Placement

The Switch component can place the label in different positions using the labelPlacement prop. The label can be placed on the left, right, top, bottom, topStart,topEnd, bottomStart and bottomEnd of the switch. Few examples are given below.

Label ClassName

The Switch component's label can be styled using the labelClassName prop.

Default Checked

The Switch component can be set to a default checked state using the defaultChecked prop. Otherwise, the switch will be unchecked by default.

Disabled

The Switch component can be disabled using the disabled prop.

Required

The Switch component can be set to a required state using the required prop.

Is Vertical

The Switch component can be set to a vertical orientation using the isVertical prop.

Reversible

The Switch component can be made reversible using the reversible prop. The false state will be identified as true and the true state will be identified as false.

On/Off Icon

The Switch component can display an icon when it is on using the onIcon prop and when it is off using the offIcon.

*

On/Off Inner Label

The Switch component can display inner label when it is on using the onInnerLabel prop and when it is off using the offInnerLabel prop.

Dark

Light*

*

Body ClassName

The bodyClassName prop is used to specify the class name for the switch body.

Switch ClassName

The switchClassName prop is used to specify the class name for the switch handle.

Custom Switch

The Switch component can be customized using the bodyClassName, switchClassName, onIcon, offIcon, onInnerLabel, and offInnerLabel props.

*

*

API Reference