EquaToggle

Last Verified: 2026-05-20 | Storybook source: equa-patternlib-nextjs/stories/EquaToggle.stories.tsx, Line: 6

Purpose

Toggle controls for settings and two-state choices.

Storybook

Story	Reference
Default	Storybook
Checked	Storybook
With Label	Storybook
Without Text	Storybook
Disabled	Storybook
Interactive	Storybook
All States	Storybook

API And Props

Prop or Control	Source	Notes
`checked`	Storybook control	See source story for accepted values
`disabled`	Storybook control	See source story for accepted values
`showText`	Storybook control	See source story for accepted values
`label`	Storybook control	See source story for accepted values

Sources:

equa-patternlib-nextjs/src/components/toggle/toggle.tsx, Line: 5
equa-patternlib-nextjs/src/components/toggle/index.ts
equa-patternlib-nextjs/stories/EquaToggle.stories.tsx, Line: 6

Figma

UNVERIFIED — requires Figma node assignment

Screenshots

State	Asset
Equa dark theme
Light theme

Usage Notes

Prefer this component over local one-off UI for matching product states.
Keep new variants represented in Storybook before adding docs references here.
Use token-backed colors, spacing, radius, and shadows from Foundations.

Accessibility Notes

Preserve keyboard and focus behavior from the source component.
Any icon-only controls must provide an accessible label in consuming product code.
Validate color contrast in both Equa dark and light theme screenshots before release.