Toggle

Toggle the Future: Seamless Interaction with Our Dynamic Toggle Component

Step into a new era of user-friendly interfaces with our Dynamic Toggle Component. This versatile element provides an effortless and visually engaging way for users to switch between two states, whether it's activating features, adjusting preferences, or initiating actions. Elevate your application's interactivity with this sleek and intuitive toggle.

Anatomy

The Toggle Component features a visually straightforward switch that smoothly transitions between two states—on and off. Its compact design ensures clarity and simplicity, allowing users to grasp the status instantly. Whether integrated into a compact control panel or standing as a prominent interactive element, this toggle adapts seamlessly to various contexts within your application.

anatomy of toggle component

Properties

Tailor the Toggle Component to suit your design vision. Customize properties such as color, size, and animation to seamlessly integrate the toggle into your application's visual identity. With adjustable parameters, you have the creative freedom to create a toggle that aligns harmoniously with your overall design aesthetic.

Checked	States	Size	Orientation	Status	Icons
True	Default	Small	Right	Default	No icon
False	Hovered	Medium	Left	Error	Right Icon
	Pressed	Large			Left Icon
	Disabled
	Read-only

Checked

• Default toggle state represents the initial condition of the toggle component, indicating that it is currently in unchecked position.

• Checked toggle signifies that it is in the "on" or checked position. Visually, the toggle handle often shifts to the opposite side, indicating that the associated action or setting is now active or enabled.

React

import React from 'react';
import { PlusToggle } from '@plusui/react';

// Unchecked Toggle
const UncheckedToggle = () => (
  <PlusToggle
    name="theme"
    value="light"
    label="Light Theme"
    caption="Toggle between light and dark theme"
    text="Light"
    textPosition="right"
  />
);

// Checked Toggle
const CheckedToggle = () => (
  <PlusToggle
    name="theme"
    value="dark"
    label="Dark Theme"
    caption="Toggle between light and dark theme"
    text="Dark"
    textPosition="right"
    checked={true}  {/* Checked */}
  />
);

export default {
  UncheckedToggle,
  CheckedToggle,
};

Angular

<!-- Unchecked Toggle -->
<plus-toggle
  name="theme"
  value="light"
  label="Light Theme"
  caption="Toggle between light and dark theme"
  text="Light"
  text-position="right"
></plus-toggle>

<!-- Checked Toggle -->
<plus-toggle
  name="theme"
  value="dark"
  label="Dark Theme"
  caption="Toggle between light and dark theme"
  text="Dark"
  text-position="right"
  [checked]="true"  
></plus-toggle>

// Some code

Vue

<template>
  <!-- Unchecked Toggle -->
  <plus-toggle
    name="theme"
    value="light"
    label="Light Theme"
    caption="Toggle between light and dark theme"
    text="Light"
    textPosition="right"
  />

  <!-- Checked Toggle -->
  <plus-toggle
    name="theme"
    value="dark"
    label="Dark Theme"
    caption="Toggle between light and dark theme"
    text="Dark"
    textPosition="right"
    :checked="true" 
  />
</template>

Javascript

<!-- Unchecked Toggle -->
<plus-toggle
  name="theme"
  value="light"
  label="Light Theme"
  caption="Toggle between light and dark theme"
  text="Light"
  text-position="right"
></plus-toggle>

<!-- Checked Toggle -->
<plus-toggle
  name="theme"
  value="dark"
  label="Dark Theme"
  caption="Toggle between light and dark theme"
  text="Dark"
  text-position="right"
  checked="true"  
></plus-toggle>

Size

The size property in a toggle component allows you to adjust the visual dimensions of the toggle. By adjusting the size property, you can make the toggle smaller, medium-sized, or larger, providing flexibility in meeting specific layout requirements.

React

import React from 'react';
import { PlusToggle } from '@plusui/react';

// Small Toggle
const SmallToggle = () => (
  <PlusToggle
    label="Small Size"
    caption="This is a small toggle"
    size="sm"  {/* Small size */}
  />
);

// Medium Toggle
const MediumToggle = () => (
  <PlusToggle
    label="Medium Size"
    caption="This is a medium toggle"
    size="md"  {/* Medium size */}
  />
);

// Large Toggle
const LargeToggle = () => (
  <PlusToggle
    label="Large Size"
    caption="This is a large toggle"
    size="lg"  {/* Large size */}
  />
);

export default {
  SmallToggle,
  MediumToggle,
  LargeToggle,
};

Angular

<!-- Small Toggle -->
<plus-toggle
  label="Small Size"
  caption="This is a small toggle"
  size="sm" 
></plus-toggle>

<!-- Medium Toggle -->
<plus-toggle
  label="Medium Size"
  caption="This is a medium toggle"
  size="md"  
></plus-toggle>

<!-- Large Toggle -->
<plus-toggle
  label="Large Size"
  caption="This is a large toggle"
  size="lg" 
></plus-toggle>

Vue

<template>
  <!-- Small Toggle -->
  <plus-toggle
    label="Small Size"
    caption="This is a small toggle"
    size="sm"
  />

  <!-- Medium Toggle -->
  <plus-toggle
    label="Medium Size"
    caption="This is a medium toggle"
    size="md"  
  />

  <!-- Large Toggle -->
  <plus-toggle
    label="Large Size"
    caption="This is a large toggle"
    size="lg" 
  />
</template>

Javascript

<!-- Small Toggle -->
<plus-toggle
  label="Small Size"
  caption="This is a small toggle"
  size="sm"  
></plus-toggle>

<!-- Medium Toggle -->
<plus-toggle
  label="Medium Size"
  caption="This is a medium toggle"
  size="md"
></plus-toggle>

<!-- Large Toggle -->
<plus-toggle
  label="Large Size"
  caption="This is a large toggle"
  size="lg" 
></plus-toggle>

States

• Default toggle state represents the initial condition of the toggle component. In this state, the toggle is in its standard, unaltered appearance, indicating the "off".

• Hovered toggle state esponds to user interaction that showcase a subtle visual change, such as a color shift.

• Pressed toggle state is activated when a user clicks or taps on the toggle.

• Read-only toggle state indicates that the toggle is non-interactive and cannot be modified by user input.

• Disabled toggle state implies that the toggle is temporarily inactive or unavailable for interaction.

React

import React from 'react';
import { PlusToggle } from '@plusui/react';

// Default Toggle
const DefaultToggle = () => (
  <PlusToggle
    label="Default Toggle"
    caption="This is a default toggle"
  />  {/* Default state */}
);

// Readonly Toggle
const ReadonlyToggle = () => (
  <PlusToggle
    label="Readonly Toggle"
    caption="This toggle is read-only"
    readOnly  {/* Read-only state */}
  />
);

// Disabled Toggle
const DisabledToggle = () => (
  <PlusToggle
    label="Disabled Toggle"
    caption="This toggle is disabled"
    disabled  {/* Disabled state */}
  />
);

export default {
  DefaultToggle,
  ReadonlyToggle,
  DisabledToggle,
};

Angular

<!-- Default Toggle -->
<plus-toggle
  label="Default Toggle"
  caption="This is a default toggle"
></plus-toggle>  <!-- Default state -->

<!-- Readonly Toggle -->
<plus-toggle
  label="Readonly Toggle"
  caption="This toggle is read-only"
  readonly  
></plus-toggle><!-- Read-only state -->

<!-- Disabled Toggle -->
<plus-toggle
  label="Disabled Toggle"
  caption="This toggle is disabled"
  disabled 
></plus-toggle> <!-- Disabled state -->

Vue

<template>
  <!-- Default Toggle -->
  <plus-toggle
    label="Default Toggle"
    caption="This is a default toggle"
  />  <!-- Default state -->

  <!-- Readonly Toggle -->
  <plus-toggle
    label="Readonly Toggle"
    caption="This toggle is read-only"
    readonly 
  /> <!-- Read-only state -->

  <!-- Disabled Toggle -->
  <plus-toggle
    label="Disabled Toggle"
    caption="This toggle is disabled"
    disabled 
  /> <!-- Disabled state -->
</template>

Javascript

<!-- Default Toggle -->
<plus-toggle
  label="Default Toggle"
  caption="This is a default toggle"
></plus-toggle>  <!-- Default state -->

<!-- Readonly Toggle -->
<plus-toggle
  label="Readonly Toggle"
  caption="This toggle is read-only"
  readonly  
></plus-toggle><!-- Read-only state -->

<!-- Disabled Toggle -->
<plus-toggle
  label="Disabled Toggle"
  caption="This toggle is disabled"
  disabled 
></plus-toggle> <!-- Disabled state -->

Orientation

• Left oriented toggle is positioned to the left of the label or control text. This layout is often used for design consistency or when aligning with specific UI patterns. Users can toggle the switch to the right for the "on" position and to the left for the "off" position.

• Right oriented toggle is positioned to the right of the label or control text. This layout is also chosen for design consistency or when aligning with particular UI conventions. Users can toggle the switch to the left for the "off" position and to the right for the "on" position.

React

import React from 'react';
import { PlusToggle } from '@plusui/react';

// Default Text Position (Right)
const DefaultTextPosition = () => (
  <PlusToggle
    label="Text Position - Default"
    caption="Text is on the right side"
    text="Toggle"
  />  {/* Default text position (right) */}
);

// Text Position Left
const TextPositionLeft = () => (
  <PlusToggle
    label="Text Position - Left"
    caption="Text is on the left side"
    text="Toggle"
    textPosition="left"  {/* Text position is on the left */}
  />
);

export default {
  DefaultTextPosition,
  TextPositionLeft,
};

Angular

<!-- Default Text Position (Right) -->
<plus-toggle
  label="Text Position - Default"
  caption="Text is on the right side"
  text="Toggle"
></plus-toggle>  <!-- Default text position (right) -->

<!-- Text Position Left -->
<plus-toggle
  label="Text Position - Left"
  caption="Text is on the left side"
  text="Toggle"
  text-position="left" 
></plus-toggle> <!-- Text position on the left -->

Vue

<template>
  <!-- Default Text Position (Right) -->
  <plus-toggle
    label="Text Position - Default"
    caption="Text is on the right side"
    text="Toggle"
  />  <!-- Default text position (right) -->

  <!-- Text Position Left -->
  <plus-toggle
    label="Text Position - Left"
    caption="Text is on the left side"
    text="Toggle"
    textPosition="left" 
  /> <!-- Text position on the left -->
</template>

Javascript

<!-- Default Text Position (Right) -->
<plus-toggle
  label="Text Position - Default"
  caption="Text is on the right side"
  text="Toggle"
></plus-toggle>  <!-- Default text position (right) -->

<!-- Text Position Left -->
<plus-toggle
  label="Text Position - Left"
  caption="Text is on the left side"
  text="Toggle"
  text-position="left" 
></plus-toggle> <!-- Text position on the left -->

Status

• Default toggle status is always ready for action, serving as the reliable foundation of your user interface.

• Error toggle status is a special status that emphasises the button's significance and its role as a primary call to action, ensuring it stands out and captures user attention.

React

import React from 'react';
import { PlusToggle } from '@plusui/react';

// Default Toggle
const DefaultToggle = () => (
  <PlusToggle
    label="Default Toggle"
    caption="This is a default toggle"
  />  {/* Default state */}
);

// Error Toggle
const ErrorToggle = () => (
  <PlusToggle
    label="Error Toggle"
    caption="This toggle has an error"
    error  {/* Error state */}
  />
);

export default {
  DefaultToggle,
  ErrorToggle,
};

Angular

<!-- Default Toggle -->
<plus-toggle
  label="Default Toggle"
  caption="This is a default toggle"
></plus-toggle>  <!-- Default state -->

<!-- Error Toggle -->
<plus-toggle
  label="Error Toggle"
  caption="This toggle has an error"
  error  
></plus-toggle><!-- Error state -->

Vue

<template>
  <!-- Default Toggle -->
  <plus-toggle
    label="Default Toggle"
    caption="This is a default toggle"
  />  <!-- Default state -->

  <!-- Error Toggle -->
  <plus-toggle
    label="Error Toggle"
    caption="This toggle has an error"
    error 
  /> <!-- Error state -->
</template>

Javascript

<!-- Default Toggle -->
<plus-toggle
  label="Default Toggle"
  caption="This is a default toggle"
></plus-toggle>  <!-- Default state -->

<!-- Error Toggle -->
<plus-toggle
  label="Error Toggle"
  caption="This toggle has an error"
  error  
></plus-toggle><!-- Error state -->

Icon

• No-icon toggle features a simple design without any additional visual elements. Users interact with the toggle switch to change its state, and the absence of an icon maintains a clean and minimalist appearance.

• Right-icon toggle is positioned to the right of the toggle switch. This visual arrangement can provide users with additional context or feedback related to the toggle state.

• Left-icon toggle is positioned to the left of the toggle switch. This layout is another way to incorporate visual cues or feedback associated with the toggle state. For instance, a sun icon on the left might represent the "on" position.

React

import React from 'react';
import { PlusToggle } from '@plusui/react';

// Toggle with General Icon
const ToggleWithGeneralIcon = () => (
  <PlusToggle
    label="Toggle with Icon"
    caption="This toggle has a general icon"
    text="Toggle Text"
    toggleIcon="fa-solid fa-star"  {/* General icon for both states */}
  />
);

// Toggle with Active/Inactive Icons
const ToggleWithActiveInactiveIcons = () => (
  <PlusToggle
    label="Toggle with Active/Inactive Icons"
    caption="This toggle has different icons for active/inactive states"
    text="Toggle Text"
    toggleInactiveIcon="fa-solid fa-volume-xmark"  {/* Inactive state icon */}
    toggleActiveIcon="fa-solid fa-volume-low"  {/* Active state icon */}
  />
);

export default {
  ToggleWithGeneralIcon,
  ToggleWithActiveInactiveIcons,
};

Angular

<!-- Toggle with General Icon -->
<plus-toggle
  label="Toggle with Icon"
  caption="This toggle has a general icon"
  text="Toggle Text"
  toggle-icon="fa-solid fa-star"  
></plus-toggle>

<!-- Toggle with Active/Inactive Icons -->
<plus-toggle
  label="Toggle with Active/Inactive Icons"
  caption="This toggle has different icons for active/inactive states"
  text="Toggle Text"
  toggle-inactive-icon="fa-solid fa-volume-xmark"  
  toggle-active-icon="fa-solid fa-volume-low"  
></plus-toggle>

Vue

<template>
  <!-- Toggle with General Icon -->
  <plus-toggle
    label="Toggle with Icon"
    caption="This toggle has a general icon"
    text="Toggle Text"
    toggleIcon="fa-solid fa-star" 
  />

  <!-- Toggle with Active/Inactive Icons -->
  <plus-toggle
    label="Toggle with Active/Inactive Icons"
    caption="This toggle has different icons for active/inactive states"
    text="Toggle Text"
    toggleInactiveIcon="fa-solid fa-volume-xmark" 
    toggleActiveIcon="fa-solid fa-volume-low"  
  />
</template>

Javascript

<!-- Toggle with General Icon -->
<plus-toggle
  label="Toggle with Icon"
  caption="This toggle has a general icon"
  text="Toggle Text"
  toggle-icon="fa-solid fa-star"  
></plus-toggle>

<!-- Toggle with Active/Inactive Icons -->
<plus-toggle
  label="Toggle with Active/Inactive Icons"
  caption="This toggle has different icons for active/inactive states"
  text="Toggle Text"
  toggle-inactive-icon="fa-solid fa-volume-xmark"  
  toggle-active-icon="fa-solid fa-volume-low"  
></plus-toggle>

Required

The Required Toggle component in our UI library ensures that critical choices are made through a customizable toggle switch, marked as required for form submissions. Extending the standard toggle functionality, this component indicating that users must make a selection before submitting the form.

React

import { PlusToggle } from '@plusui/react';

function App() {
    return (
        <>
            <PlusToggle label="Label" caption="Caption" text="Toogle Text" required />
        </>
    );
}

Angular

<plus-toggle label="Label" caption="Caption" text="Toogle Text" required></plus-toggle>

Vue

Javascript

<plus-toggle label="Label" caption="Caption" text="Toogle Text" required></plus-toggle>

Layout & Spacing

Achieve precision in design with our Toggle Component's flexible layout and spacing options. Define the placement and spacing to ensure seamless integration into your application's layout, whether it's part of a compact control panel or a standalone interactive element.

layout and spacing of toggle component

Light & Dark Mode

Effortlessly adapt to user preferences with our Toggle Component's built-in support for both light and dark modes. Enhance visibility and aesthetics by seamlessly transitioning between these modes, ensuring a consistent and visually appealing experience in any lighting condition.

light and dark mode of toggle component

Accessibility

Engineered with industry-leading standards, it ensures a user-friendly experience for all individuals, including those with disabilities. Screen reader compatibility, keyboard navigation, and high contrast options make our Toggle Component accessible and intuitive for a diverse user base.

Criteria	Description	Status
ID’s active element	Ensures every id attribute value of active elements is unique	Passed
ID’s use in ARIA	Ensures every id attribute value used in ARIA and in labels is unique	Passed
ID Attribute	Ensures every id attribute value is unique	Passed
Attribute	Ensures tabindex attribute values are not greater than 0	Passed

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
name	Form name attribute	String	Any valid string	""
value	Value for form submission	String	Any valid string	""
checked	If true, toggle is in the "checked" state	Boolean	true, false	false
size	Sets the size of the toggle	String	sm, md, lg	md
label	Label text for the toggle	String	Any valid string	""
text	Text displayed beside the toggle	String	Any valid string	""
textPosition	Position of the text relative to the toggle	String	left, right	right
toggleIcon	Icon for the toggle switch	String	Any valid icon class	""
toggleActiveIcon	Icon when the toggle is in the "checked" state	String	Any valid icon class	""
toggleInActiveIcon	Icon when the toggle is in the "unchecked" state	String	Any valid icon class	""
caption	Additional descriptive text for the toggle	String	Any valid string	""
error	If true, the toggle has an error state	Boolean	true, false	false
readonly	If true, the toggle is read-only	Boolean	true, false	false
required	If true, the toggle is a required field	Boolean	true, false	false
disabled	If true, the toggle is disabled	Boolean	true, false	false