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 | unionPossible 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 |