Simple state, clearly named
A toggle is best when the state is binary and easy to describe.
Toggle Component
Use the Toggle component when a page needs simple explicit UI state without over-engineering the data model.
Introduction
Section titled “Introduction”The Toggle component is useful when a page needs small explicit client-side state such as open or closed, enabled or disabled, selected or not. Its strength is clarity. Instead of inferring state from CSS classes or DOM conditions, the page carries a named boolean value that other bindings and actions can read directly.
Useful companion to conditional UI
Toggles work well with show or hide patterns, event responses, and lightweight workflow steps.
Use toggles for clear boolean UI state, not for complex data storage.
Name the state after what the user understands, not after the implementation trick.
Let other bindings read the toggle directly instead of re-checking the DOM.
Reset toggle state deliberately when the page workflow needs it.
Keep boolean state readable
Section titled “Keep boolean state readable”The component is tiny, but naming and usage determine whether it stays helpful.
Prefer named state over DOM inspection
Section titled “Prefer named state over DOM inspection”A visible panel or selected region should usually be driven by a named toggle instead of asking the DOM what happened last. That makes the page easier to debug and easier to reuse.
Readable intent
The state variable tells you why the UI changed, not just that it changed.
Connect the toggle to page behavior
Section titled “Connect the toggle to page behavior”A toggle becomes useful when other bindings react to it consistently. Visibility, button labels, icon states, and follow-up actions should all tell the same story.
One state, many bindings
A single toggle can coordinate several small pieces of UI without duplication.
Reset state on purpose
Section titled “Reset state on purpose”Some boolean state should survive while the user works; some should clear after a submit, close, or navigation step. Decide that intentionally so the page does not feel sticky or unpredictable.
Lifecycle matters
A toggle should have an obvious beginning, active use, and reset point when needed.
Next steps
Section titled “Next steps”Toggles pair well with conditional display, shared request feedback, and client-side flows that need lightweight UI state along the way.