Toggle with Label-Info

This showcase combines the CSS toggle pattern with dsx-label-info to create a friendly settings panel preview. Each preference keeps a short explanation in the row and moves extra guidance into an inline help popover.

Live Preview

What it demonstrates

Multiple .dsx-toggle rows in a realistic settings panel layout
<dsx-label-info> labels that keep extra help close to the setting name
Short descriptive copy under each preference for non-technical readers
Standard on and off states plus a disabled “managed” example
A presentation-ready preview that works for notification and privacy settings

Building blocks

File	Classes / elements used
`css/toggle.css`	`.dsx-toggle`, `.dsx-toggle__input`, `.dsx-toggle__label`
`components/label-info.js`	`<dsx-label-info>`

Pattern summary

<div class="setting-row">
  <div class="setting-copy">
    <dsx-label-info text="Weekly summary email" placement="bottom">
      Sent every Monday morning to workspace owners and team leads.
    </dsx-label-info>
    <p class="setting-description">Send a concise recap of the week in one place.</p>
  </div>

  <label class="dsx-toggle">
    <input class="dsx-toggle__input" type="checkbox" checked aria-label="Enable weekly summary email">
    <span class="dsx-toggle__label">On</span>
  </label>
</div>

Usage notes

Keep the setting name outside the switch so the row reads like a natural settings list.
Use dsx-label-info for brief contextual help, not for instructions someone must read before using the control.
If the visible toggle text is only On, Off, or Managed, give the checkbox a clear aria-label.
Combine row copy and inline help so people can understand the setting without opening every popover.