🚧 This website is work in progress 👷
Components
Controls
Published
Toggle

Toggles are controls that are used to quickly switch between two possible states.

The example below shows an uncontrolled Toggle component. To use the Toggle component as a controlled component, set the toggled property. Setting the toggled property will allow you to change the value dynamically, whereas setting the defaultToggled prop will only set the value initially.

When to use

  • A user needs to input unique information that cannot be predicted with a preset of options.
  • A user needs to input memorable data that can be entered more quickly in a free-hand format versus a more complex control.

When not to use

  • If a user can only enter an option from a predefined list then avoid using a free-form text input as it is likely to result in an error. Consider using a selection control such as a dropdown, select, or radio button group instead.

Reference

Edit this page

References