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.
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
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.
import React from'react';import { PlusToggle } from'@plusui/react';// Unchecked ToggleconstUncheckedToggle= () => ( <PlusTogglename="theme"value="light"label="Light Theme"caption="Toggle between light and dark theme"text="Light"textPosition="right" />);// Checked ToggleconstCheckedToggle= () => ( <PlusTogglename="theme"value="dark"label="Dark Theme"caption="Toggle between light and dark theme"text="Dark"textPosition="right"checked={true} {/* Checked */} />);exportdefault { UncheckedToggle, CheckedToggle,};
<!-- Unchecked Toggle --><plus-togglename="theme"value="light"label="Light Theme"caption="Toggle between light and dark theme"text="Light"text-position="right"></plus-toggle><!-- Checked Toggle --><plus-togglename="theme"value="dark"label="Dark Theme"caption="Toggle between light and dark theme"text="Dark"text-position="right"[checked]="true"></plus-toggle>
// Some code
<template><!-- Unchecked Toggle --> <plus-togglename="theme"value="light"label="Light Theme"caption="Toggle between light and dark theme"text="Light"textPosition="right" /><!-- Checked Toggle --> <plus-togglename="theme"value="dark"label="Dark Theme"caption="Toggle between light and dark theme"text="Dark"textPosition="right":checked="true" /></template>
<!-- Unchecked Toggle --><plus-togglename="theme"value="light"label="Light Theme"caption="Toggle between light and dark theme"text="Light"text-position="right"></plus-toggle><!-- Checked Toggle --><plus-togglename="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.
import React from'react';import { PlusToggle } from'@plusui/react';// Small ToggleconstSmallToggle= () => ( <PlusTogglelabel="Small Size"caption="This is a small toggle"size="sm" {/* Small size */} />);// Medium ToggleconstMediumToggle= () => ( <PlusTogglelabel="Medium Size"caption="This is a medium toggle"size="md" {/* Medium size */} />);// Large ToggleconstLargeToggle= () => ( <PlusTogglelabel="Large Size"caption="This is a large toggle"size="lg" {/* Large size */} />);exportdefault { SmallToggle, MediumToggle, LargeToggle,};
<!-- Small Toggle --><plus-togglelabel="Small Size"caption="This is a small toggle"size="sm"></plus-toggle><!-- Medium Toggle --><plus-togglelabel="Medium Size"caption="This is a medium toggle"size="md"></plus-toggle><!-- Large Toggle --><plus-togglelabel="Large Size"caption="This is a large toggle"size="lg"></plus-toggle>
<template><!-- Small Toggle --> <plus-togglelabel="Small Size"caption="This is a small toggle"size="sm" /><!-- Medium Toggle --> <plus-togglelabel="Medium Size"caption="This is a medium toggle"size="md" /><!-- Large Toggle --> <plus-togglelabel="Large Size"caption="This is a large toggle"size="lg" /></template>
<!-- Small Toggle --><plus-togglelabel="Small Size"caption="This is a small toggle"size="sm"></plus-toggle><!-- Medium Toggle --><plus-togglelabel="Medium Size"caption="This is a medium toggle"size="md"></plus-toggle><!-- Large Toggle --><plus-togglelabel="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.
import React from'react';import { PlusToggle } from'@plusui/react';// Default ToggleconstDefaultToggle= () => ( <PlusTogglelabel="Default Toggle"caption="This is a default toggle" /> {/* Default state */});// Readonly ToggleconstReadonlyToggle= () => ( <PlusTogglelabel="Readonly Toggle"caption="This toggle is read-only"readOnly {/* Read-only state */} />);// Disabled ToggleconstDisabledToggle= () => ( <PlusTogglelabel="Disabled Toggle"caption="This toggle is disabled"disabled {/* Disabled state */} />);exportdefault { DefaultToggle, ReadonlyToggle, DisabledToggle,};
<!-- Default Toggle --><plus-togglelabel="Default Toggle"caption="This is a default toggle"></plus-toggle> <!-- Default state --><!-- Readonly Toggle --><plus-togglelabel="Readonly Toggle"caption="This toggle is read-only"readonly></plus-toggle><!-- Read-only state --><!-- Disabled Toggle --><plus-togglelabel="Disabled Toggle"caption="This toggle is disabled"disabled></plus-toggle> <!-- Disabled state -->
<template><!-- Default Toggle --> <plus-togglelabel="Default Toggle"caption="This is a default toggle" /> <!-- Default state --><!-- Readonly Toggle --> <plus-togglelabel="Readonly Toggle"caption="This toggle is read-only"readonly /> <!-- Read-only state --><!-- Disabled Toggle --> <plus-togglelabel="Disabled Toggle"caption="This toggle is disabled"disabled /> <!-- Disabled state --></template>
<!-- Default Toggle --><plus-togglelabel="Default Toggle"caption="This is a default toggle"></plus-toggle> <!-- Default state --><!-- Readonly Toggle --><plus-togglelabel="Readonly Toggle"caption="This toggle is read-only"readonly></plus-toggle><!-- Read-only state --><!-- Disabled Toggle --><plus-togglelabel="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.
import React from'react';import { PlusToggle } from'@plusui/react';// Default Text Position (Right)constDefaultTextPosition= () => ( <PlusTogglelabel="Text Position - Default"caption="Text is on the right side"text="Toggle" /> {/* Default text position (right) */});// Text Position LeftconstTextPositionLeft= () => ( <PlusTogglelabel="Text Position - Left"caption="Text is on the left side"text="Toggle"textPosition="left" {/* Text position is on the left */} />);exportdefault { DefaultTextPosition, TextPositionLeft,};
<!-- Default Text Position (Right) --><plus-togglelabel="Text Position - Default"caption="Text is on the right side"text="Toggle"></plus-toggle> <!-- Default text position (right) --><!-- Text Position Left --><plus-togglelabel="Text Position - Left"caption="Text is on the left side"text="Toggle"text-position="left"></plus-toggle> <!-- Text position on the left -->
<template><!-- Default Text Position (Right) --> <plus-togglelabel="Text Position - Default"caption="Text is on the right side"text="Toggle" /> <!-- Default text position (right) --><!-- Text Position Left --> <plus-togglelabel="Text Position - Left"caption="Text is on the left side"text="Toggle"textPosition="left" /> <!-- Text position on the left --></template>
<!-- Default Text Position (Right) --><plus-togglelabel="Text Position - Default"caption="Text is on the right side"text="Toggle"></plus-toggle> <!-- Default text position (right) --><!-- Text Position Left --><plus-togglelabel="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.
import React from'react';import { PlusToggle } from'@plusui/react';// Default ToggleconstDefaultToggle= () => ( <PlusTogglelabel="Default Toggle"caption="This is a default toggle" /> {/* Default state */});// Error ToggleconstErrorToggle= () => ( <PlusTogglelabel="Error Toggle"caption="This toggle has an error"error {/* Error state */} />);exportdefault { DefaultToggle, ErrorToggle,};
<!-- Default Toggle --><plus-togglelabel="Default Toggle"caption="This is a default toggle"></plus-toggle> <!-- Default state --><!-- Error Toggle --><plus-togglelabel="Error Toggle"caption="This toggle has an error"error></plus-toggle><!-- Error state -->
<template><!-- Default Toggle --> <plus-togglelabel="Default Toggle"caption="This is a default toggle" /> <!-- Default state --><!-- Error Toggle --> <plus-togglelabel="Error Toggle"caption="This toggle has an error"error /> <!-- Error state --></template>
<!-- Default Toggle --><plus-togglelabel="Default Toggle"caption="This is a default toggle"></plus-toggle> <!-- Default state --><!-- Error Toggle --><plus-togglelabel="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.
import React from'react';import { PlusToggle } from'@plusui/react';// Toggle with General IconconstToggleWithGeneralIcon= () => ( <PlusTogglelabel="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 IconsconstToggleWithActiveInactiveIcons= () => ( <PlusTogglelabel="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 */} />);exportdefault { ToggleWithGeneralIcon, ToggleWithActiveInactiveIcons,};
<!-- Toggle with General Icon --><plus-togglelabel="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-togglelabel="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>
<template><!-- Toggle with General Icon --> <plus-togglelabel="Toggle with Icon"caption="This toggle has a general icon"text="Toggle Text"toggleIcon="fa-solid fa-star" /><!-- Toggle with Active/Inactive Icons --> <plus-togglelabel="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>
<!-- Toggle with General Icon --><plus-togglelabel="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-togglelabel="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.
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.
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.
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.