Toggle Switch

Toggle Switch is used to turn a setting on or off. It provides a clear visual indication of the current state.

Overview

Usage

When to use this component?

Toggle switches are used when users need to make a binary choice, such as turning a feature on or off. They are ideal for settings where changes take immediate effect without requiring additional actions, like a submit button. Common use cases include enabling or disabling notifications, switching between dark and light modes, or toggling application modes.

How it works

A toggle switch is visualized as a sliding switch that moves between two states, usually labeled "on" and "off." The switch’s position clearly indicates the current state. Toggle switches may also include optional elements like subtitles or icons to add context or functionality, enhancing user understanding of the toggle’s purpose.

Code

Vanilla Js

<dda-toggle
    checked="false"
    label_on="On"
    label_off="Off"
    size="md"
    group_name="togglegroup1"
    input_id="testId"
    custom_class=""
    component_mode=""
    aria_label="toggle"
    onchange="console.log('changed')"
></dda-toggle>

React

    <DdaToggle
            checked="false"
            label_on="On"
            label_off="Off"
            size="md"
            group_name="togglegroup1"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="toggle"
            onchange="console.log('changed')"
        ></DdaToggle>

Vue

   <DdaToggle
            checked="false"
            label_on="On"
            label_off="Off"
            size="md"
            group_name="togglegroup1"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="toggle"
            onchange="console.log('changed')"
        ></DdaToggle>

Angular

<dda-toggle
    checked="false"
    label_on="On"
    label_off="Off"
    size="md"
    group_name="togglegroup1"
    input_id="testId"
    custom_class=""
    component_mode=""
    aria_label="toggle"
    onchange="console.log('changed')"
></dda-toggle>```

Properties

Property	Description	Type
aria_label	Defines an accessible label for screen readers, providing additional context for users with assistive technologies.	string
checked	Determines whether the toggle switch is initially checked (on) or not (off).	boolean
component_mode	A mode or variant setting that might be used to apply different styles or behaviors based on predefined themes or configurations.	string
custom_class	Allows adding custom CSS classes to modify the appearance of the toggle. Defaults to an empty string.	string
group_name	Specifies the name attribute for the input, which is useful when grouping multiple toggle buttons together (e.g., in a radio group).	string
input_id	Sets the id attribute for the input element, allowing it to be uniquely identified in the DOM.	string
size	Defines the size of the toggle switch. Possible values could be 'sm', 'md', or 'lg'.	string

Anatomy

Anatomy Options

Toggle Switch: The main component that allows users to switch between two states.

Knob: The circular element that moves to indicate the toggle state.

Toggle Label: The primary label that describes the purpose of the toggle.

Subtitle: Additional information or description to clarify the function of the toggle.

Dos and Don'ts

Dos	Don'ts
Use toggle switches for settings that can be turned on or off.	Don't use toggle switches for actions that require multiple steps or confirmation.
Label each toggle switch clearly to indicate its function.	Avoid using ambiguous or unclear labels for toggle switches.
Ensure toggle switches are large enough to be easily tappable or clickable.	Don't make toggle switches too small to interact with comfortably.
Provide a clear visual indication of the toggle switch's state.	Don't leave users guessing whether a feature is enabled or disabled.
Group related toggle switches together visually and logically.	Don't scatter related toggle switches throughout different parts of the UI.
Use consistent spacing between toggle switches in the same group.	Don't place toggle switches too close together or too far apart, which can hinder usability.
Include appropriate aria-labels for accessibility.	Don't neglect accessibility requirements such as focus states and keyboard navigation.
Ensure each toggle switch has sufficient contrast against its background.	Avoid using low contrast that can make the toggle switches difficult to see.