Switch

What this example shows

SvSwitchButton - a production settings panel: a list of labelled switches with descriptions, on/off track labels and a disabled row. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (308-switch.svelte)

<script lang="ts">
  /**
   * SvSwitchButton - a production settings panel: a list of labelled switches
   * with descriptions, on/off track labels and a disabled row. Copy-paste ready.
   */
  import { SvSwitchButton } from '@svgrid/grid'

  let settings = $state({ notifications: true, marketing: false, twoFactor: true, beta: false })
</script>

<div class="wrap">
  <header>
    <h2>Switch</h2>
    <p>An instant on/off control (ARIA <code>switch</code>) - the standard for settings and preferences.</p>
  </header>

  <div class="panel">
    <div class="row">
      <div class="txt"><strong>Push notifications</strong><span>Alerts on your devices</span></div>
      <SvSwitchButton checked={settings.notifications} onChange={(v) => (settings.notifications = v)} />
    </div>
    <div class="row">
      <div class="txt"><strong>Marketing emails</strong><span>Product news and offers</span></div>
      <SvSwitchButton checked={settings.marketing} onChange={(v) => (settings.marketing = v)} />
    </div>
    <div class="row">
      <div class="txt"><strong>Two-factor auth</strong><span>Extra login security</span></div>
      <SvSwitchButton checked={settings.twoFactor} onLabel="ON" offLabel="OFF" onChange={(v) => (settings.twoFactor = v)} />
    </div>
    <div class="row is-disabled">
      <div class="txt"><strong>Beta features</strong><span>Requires an admin invite</span></div>
      <SvSwitchButton checked={settings.beta} disabled onChange={(v) => (settings.beta = v)} />
    </div>
  </div>
</div>

<style>
  .wrap { padding: 20px; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  code { background: var(--sg-row-hover-bg, #eef2ff); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
  .panel { border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; overflow: hidden; }
  .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; }
  .row + .row { border-top: 1px solid var(--sg-border, #e2e8f0); }
  .row.is-disabled { opacity: 0.6; }
  .txt { display: flex; flex-direction: column; gap: 2px; }
  .txt strong { font-size: 13.5px; }
  .txt span { font-size: 12px; color: var(--sg-muted, #64748b); }
</style>

View this example on GitHub

Related documentation

• SvSwitchButton

Related articles

• SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms - Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.
• An Actions Column (Edit, Delete) in SvGrid - Build a per-row actions column with edit, delete, and duplicate buttons in SvGrid - handling data mutations, accessibility, and confirmation flows correctly.

More Buttons & Toggles examples

• Buttons & toggles - The UI kit press/toggle primitives: SvButton (variants/sizes/loading), SvRepeatButton (hold-to-repeat), SvToggleButton, SvSwitchButton, SvCheckBox (+ indeterminate), SvRadioGroup (arrow-key nav) and SvRating (half stars). Theme-driven, standalone or as grid cell controls.
• Button group - SvButtonGroup: a segmented button bar - single-select (radio semantics, a view switcher), multi-select (a toggle set / formatting toolbar) or plain actions. Roving tabindex + arrow keys, and the shared editor contract (label, validation, dir/RTL).
• Button - SvButton in production: a toolbar (variants primary/secondary/outline/ghost/danger), sizes, icon slots, a loading state and a full-width CTA. Copy-paste-ready blocks.
• Repeat button - SvRepeatButton: hold-to-repeat with acceleration - a quantity stepper and a volume control block.
• Toggle button - SvToggleButton: a pressed on/off button (aria-pressed) - a text-formatting toolbar and pin / live state toggles.