Checkbox

What this example shows

SvCheckBox - a production permissions block with a tri-state "select all" parent (indeterminate when partial) plus a required terms checkbox with validation. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (309-checkbox.svelte)

<script lang="ts">
  /**
   * SvCheckBox - a production permissions block with a tri-state "select all"
   * parent (indeterminate when partial) plus a required terms checkbox with
   * validation. Copy-paste ready.
   */
  import { SvCheckBox } from '@svgrid/grid'

  const perms = ['Read', 'Write', 'Delete', 'Invite members']
  let checked = $state<boolean[]>([true, true, false, false])
  const allOn = $derived(checked.every(Boolean))
  const someOn = $derived(checked.some(Boolean) && !allOn)
  function toggleAll(v: boolean) { checked = checked.map(() => v) }

  let agree = $state(false)
  let submitted = $state(false)
  const agreeError = $derived(submitted && !agree ? 'You must accept the terms' : undefined)
</script>

<div class="wrap">
  <header>
    <h2>Checkbox</h2>
    <p>Tri-state (checked / unchecked / indeterminate) - a "select all" parent plus a validated terms box.</p>
  </header>

  <section class="block">
    <h3>Role permissions</h3>
    <div class="parent">
      <SvCheckBox checked={allOn} indeterminate={someOn} onChange={toggleAll}>All permissions</SvCheckBox>
    </div>
    <div class="children">
      {#each perms as p, i (p)}
        <SvCheckBox checked={checked[i]} onChange={(v) => (checked[i] = v)}>{p}</SvCheckBox>
      {/each}
    </div>
  </section>

  <section class="block">
    <h3>Terms</h3>
    <SvCheckBox checked={agree} required invalid={!!agreeError} error={agreeError} onChange={(v) => (agree = v)}>
      I agree to the terms of service
    </SvCheckBox>
    <div class="submit"><button class="btn" onclick={() => (submitted = true)}>Submit</button></div>
  </section>
</div>

<style>
  .wrap { padding: 20px; max-width: 460px; display: flex; flex-direction: column; gap: 22px; }
  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; }
  .block h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #64748b); }
  .parent { padding-bottom: 8px; border-bottom: 1px solid var(--sg-border, #e2e8f0); font-weight: 600; }
  .children { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 0 18px; }
  .submit { margin-top: 12px; }
  .btn { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 8px; background: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); cursor: pointer; }
</style>

View this example on GitHub

Related documentation

• SvCheckBox

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.