Detalhes do pacote

@commercetools-uikit/toggle-input

commercetools12.3kMIT20.3.0

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

javascript, typescript, design-system, react

readme (leia-me)

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

changelog (log de mudanças)

All new changes are now documented in CHANGELOG.md files in each package's directory and in GitHub Releases.

If you're looking for the changelog until v10.18.6, see Archived Changelog.