Svelte Switch Showcase

📚 Switch Component

A binary switch component with Svelte 5 runes, snippets, and generic typing.

Import

Basic Usage

🔧 Properties

Property	Type	Default	Description	Version
`checked`	`boolean`	`false`	Current state of the switch (bindable via `bind:checked`)	1.0+
`isDisabled`	`boolean`	`false`	Disables interaction when true	1.0+
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction	1.0+
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number`	`"md"`	Named size (31/33/35/38/41px) or numeric pixels (scale = size / 50). Default changed from `50` to `"md"` in 2.0.	2.0+ named
`items`	`readonly [T, T] \| null`	`null`	Strict tuple of exactly 2 items for snippet access. Generic over `T`.	2.0+ tuple
`itemStyles`	`StepStyle \| StepStyle[]`	`undefined`	Custom colours. Object applies to both states; array of length 2 applies per-state.	1.0+
`onToggle`	`(checked: boolean) => void`	`undefined`	Callback fired when state changes	1.0+

❌ Removed in v2.0

disableThumbRender — no longer needed; just don't pass the thumb snippet if you want no thumb content.
update() instance method — Svelte 5 props are reactive; mutate the $state object passed to mount() instead.

🎭 Snippets

Snippet	Context	Description	Version
`thumb`	`{ index, item, isSelected }`	Custom content inside the moving thumb. `item` is typed as `T \| undefined`.	2.0+ renamed from children/thumbTemplate

v2.0 snippet rename. 1.x had two snippets (children and thumbTemplate); they collapsed into one (thumb) since they served the same role. Snippet context changed too: currentIndex → index, currentItem → item.

📋 Type Definitions

StepStyle interface

Generic items signature

💡 Usage Examples

Two-way Binding

Custom Styling (per-instance)

Custom thumb snippet

Event Handling

Named size (form-aligned)

Vanilla JavaScript (mount + $state)

🎨 Theming

v2.0 introduced a full theming layer. See the dedicated Theming page for the live preset gallery and variable list. Quick summary:

Full variable catalogue: component-variables.manifest.json at the package root.

♿ Accessibility

Built-in Features

✅ Keyboard activation (Space, Enter)
✅ Focus ring with theme-aware colour (--sw-focus-color)
✅ ARIA role="switch" + aria-checked
✅ Screen reader support
✅ Disabled state skips focus order

Best Practices

🎯 Provide a label or accessible name nearby
🎯 Ensure sufficient colour contrast on themed surfaces
🎯 Test with keyboard navigation
🎯 Consider reduced motion preferences