Toggle

Best Practices

Ez toggle should:

• Be clearly labelled, or provide an accessible name for assistive technologies
• Be labelled positively; for example, "Enable notifications"
• Be used for interactions where the effect of the interaction is immediate. For deferred interactions, such as saving changes when a form is submitted, use the checkbox component instead;

Examples

Basic toggle

Toggle inputs are used to offer binary choices. Use a toggle input only when the effect of the interaction is immediate.

Basic toggle with label

Add a descriptive label to the right of the toggle input that when interacted with will toggle the state of the input.

Basic toggle with status

When providing a choice that requires an asynchronous action to take affect, it can be beneficial to indicate the progress of the action to the user. Use the optional status prop to indicate whether the toggled changes have been successfully applied.

The checked value should always be updated optimistically to reflect the new state and assume the asynchronous action completes successfully. Should the asynchronous action fail to complete, the checked value will need to be reset accordingly.

The status prop accepts the following values:

• use status="progress" when the change is still in-flight, or confirmation has not yet been received.
• use status="success" when the change has been successfully applied.
• use status="error" when the change could not be applied.

Disabled toggle

Use the disabled prop to prevent users from being able to interact with the toggle input and to convey the inactive state to assistive technologies.

Disabled toggle with label

Add a descriptive label to the right of the toggle input that when interacted with will toggle the state of the input.

Related components

• EzField
• EzFormLayout
• EzCheckbox