cauldron icon indicating copy to clipboard operation
cauldron copied to clipboard

Published 20 hours ago • verified publisher icon dequelabs

Add Switch Component

Open erik-deque opened this issue 4 years ago • 5 comments

Switch components are a component indicating a boolean state (typically on/off) to activate or deactivate a particular setting. They differ slightly from Checkboxes in that typically the outcome of the state change usually takes effect immediately.

The component should follow general APG guidelines for the html checkbox input: https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-checkbox/

The general guidelines are:

  • The input element should use role="switch"
  • The checkbox will be visually hidden, but the visual component of the switch can be styled with sibling selectors (i.e. .Switch input[type="checkbox"] ~ .Toggle { ... })

Interface

type SwitchProps extends Omit<React.HTMLAttributes<InputElement>, 'role'> {
  label: ContentNode
}

Design

[!NOTE]
The design requirements have changed slightly in the "off" state no longer should be indicated with an "x" icon. Only the on state should have a checkbox icon. Additionally, the label should be aligned to the right of the switch.

~- UXPin example: https://preview.uxpin.com/520e80315786a67ba43a3ca50598e6d69782627c#/pages/164060049?mode=cvidm~ ~- Light component: https://preview.uxpin.com/design-system/c933c74928e2195cc540/6814111,light-toggle~ ~- Dark component: https://preview.uxpin.com/design-system/c933c74928e2195cc540/6814112,dark-toggle~

light and dark theme toggle examples

erik-deque avatar Apr 13 '21 15:04 erik-deque

~Design is in the Tag component in uxpin https://preview.uxpin.com/4052c8b6f05ce03e28813f28deb3a682950c2ac6#/pages/140808128/simulate/sitemap~

Outdated, new designs above

okry avatar May 24 '22 14:05 okry

~You can achieve this today using the following component, <Button variant="tag" role="switch" aria-checked="true" /> but it would be good to elevate this to a top level component.~

Outdated, new specs coming soon.

scurker avatar Feb 14 '23 19:02 scurker

Notes from working session:

  • Remove "x" indication from off state
  • Left aligned "toggle switch" with right aligned "label"
  • @ezirlingerDQ will update designs to reflect above changes

scurker avatar May 21 '24 18:05 scurker

Created the updated component in Figma. Asked the design team to review prior to attaching here.

ezirlingerDQ avatar May 22 '24 16:05 ezirlingerDQ

@ezirlingerDQ it was pointed out that the disabled color in dark mode is not significantly different than the resting state

scurker avatar Jun 05 '24 18:06 scurker