Phoundry UI

CheckboxToggle

Toggle switch with sliding pill animation. Semantically a switch (role="switch") with optional label and press animation on the thumb.

import { CheckboxToggle } from 'phoundry-ui';

Basic toggle

Off
Show code 
<CheckboxToggle checked={value} onchange={() => value = !value} />

With label

Receive push notifications for important events
Show code 
<CheckboxToggle
  checked={value}
  onchange={() => value = !value}
  label="Enable notifications"
  description="Receive push notifications for important events"
/>

Sizes

Show code 
<CheckboxToggle checked={a} onchange={...} size="sm" label="Small" />
<CheckboxToggle checked={b} onchange={...} size="md" label="Medium" />

Snippet label

Pass a snippet when the label needs inline formatting.
Show code 
{#snippet promo()}
  Accept <strong class="text-accent-secondary">marketing email</strong>
{/snippet}

<CheckboxToggle checked={v} onchange={...} label={promo} />

Disabled

Show code 
<CheckboxToggle checked={false} disabled label="Disabled toggle" />

Props

PropTypeDefaultDescription
checked requiredboolean—Whether the toggle is on
onchange () => void—Called when the toggle is flipped
disabled booleanfalsePrevents interaction
size 'sm' | 'md''sm'Size of the toggle track and thumb
label string | Snippet—Inline label rendered next to the toggle
description string—Helper text below the label
class string—Additional CSS classes
id string—Element id (auto-generated if omitted)
name string—Form field name — renders a hidden input
element HTMLButtonElement—Bindable reference to the switch button.
...rest Record<string, unknown>—Forwarded to the `<button>` (e.g. `aria-describedby`).

Usage tips

  • Use for boolean settings that take effect immediately (e.g. dark mode, notifications).
  • Prefer Checkbox over CheckboxToggle when the value is part of a form that requires explicit submission.
  • The thumb has a press animation — users get tactile feedback on click.
  • Pass a name prop for native form submission via hidden input.