PrimeNGWinNgLog out
First Name

Toggle (Input Switch)

Used to switch on/off filters or settings.

Purpose

Toggles are used to switch between two mutually exclusive options.

View on PrimeNG
Get the Figma Asset
Get Documentation

Usage

When to use
  • The user is able to chose between 2 options
When not to use
  • If there are multiple options available
  • If there is no default option
  • If the choices are independent

Video Recap

Best Practice

Example One

Turning on settings

Example Two

Filtering table

Example Three

Using the toggle as a binary option not opposing options

Example Four

Winsupply Standards

Testing Demo
Test
testing content here testing content here
Right Aligned Numbers
$21,344.00 |
Numbers in a table like cost, quantity and price are right aligned inside of a table.
Date Format
00/00/2024
Across all domains, the date format should be listed in this way to ensure consistency.
Left Arrow
Right Arrow

Incorrect Usage

Example One

Example Two

Example Three

Example Four

Variants

Sizing

Default 24px Height

Tablet 48px Height

Related Components

Radio Button
Select Button

Applications In Use

No items found.