@commercetools-uikit/toggle-input

ToggleInput

Description

The `ToggleInput` component allows a single settings option to be turned on or off.

Installation

yarn add @commercetools-uikit/toggle-input

npm --save install @commercetools-uikit/toggle-input

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import ToggleInput from '@commercetools-uikit/toggle-input';

const Example = () => (
  <ToggleInput
    isDisabled={false}
    isChecked={false}
    onChange={(event) => alert(event.target.checked)}
    size="small"
  />
);

export default Example;

Properties

Props	Type	Required	Default	Description
id	string			Used as the HTML id property
name	string			Used as the HTML name property
size	union Possible values: 'small' , 'big'		'big'	The size of the ToggleInput component.
isDisabled	boolean		false	Disables the ToggleInput
isChecked	boolean		false	Checks the ToggleInput
value	string			Determines the toggle state.
onChange	ChangeEventHandler	✅		Handler when toggle state changes. Note: that key value of the target is checked.

When to use ToggleInput vs Checkbox and Radio

Switch type	Number of options	Selection
Checkbox	Multiple	Multiple
Radio	Multiple	Single
ToggleInput	Two	Single