README
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 . |
ToggleInput
vs Checkbox
and Radio
When to use Switch type | Number of options | Selection |
---|---|---|
Checkbox |
Multiple | Multiple |
Radio |
Multiple | Single |
ToggleInput |
Two | Single |