The thumb snippet

The thumb snippet replaces the default thumb content. For a binary Switch, the snippet runs once and you usually read the checked state from your own scope (as both examples here do).

Snippet context

If you supply items, the snippet receives { index, item } describing the active half of the tuple. For pure binary toggles you can ignore the context entirely.

v2.0 split

In 1.x children ran in BOTH the moving thumb and each step background. 2.0 split that into thumb (one render) and segment (one render per step) so each snippet has one job.

1.x parity pattern

To get the v1.x behaviour where the thumb showed the active item's content, pass both thumb and segment with the same markup. Optionally hide the active segment (opacity: isSelected ? 0 : ...) to avoid double-rendering underneath the thumb.

segment context

• index — Index of the step (was currentIndex)
• item — The item data for this step
• isSelected — index === activeIndex

label snippet (v2.0)

Renamed from 1.x labelTemplate. Same role: full control over each per-step label.

Snippet context

• index — Index of this label
• item — Item data (typed as T | undefined)
• isSelected — Whether this label corresponds to the active step

Easier alternatives

If you only need label text, prefer labelMember or labelCallback — see Labels.

All four together

itemStyles drives per-step background colours, segment renders the static icon per step, thumb shows the theme name in the moving thumb, label renders the rich per-step caption.

Real-world fit

• Theme selectors
• Media players
• Dashboard controls
• Configuration panels