Position Options

• top — Above the switch
• bottom — Below the switch (default)
• left — To the left (vertical only)
• right — To the right (vertical only)

💡 Tip: Block render mode

All examples on this page use labelRenderMode="block", which reserves space for labels in document flow. This is the recommended mode for most layouts.

labelRenderMode="absolute" is the legacy default — labels are absolutely positioned and don't reserve space, requiring manual padding on the container. See the next section for the comparison.

Render Modes

absolute (default)

• Labels use absolute positioning
• Don't affect layout flow
• Require manual padding
• More control over exact positioning

block

• Labels use static positioning
• Take up space in document flow
• No padding needed
• Simpler to use, less flexible

Recommendation

Use block for most layouts; reach for absolute only when you need fixed-position label overlay (e.g., compact toolbars).

Object-aware label resolution

Both ways read structured data without writing a snippet.

1. labelMember

• Extracts label text from an item property
• Example: labelMember="name" reads item.name
• Null-safe: skips if property doesn't exist

2. labelCallback

• Custom function: (item: T, index: number) => string
• Access to both item data and index
• Ideal for computed or formatted labels

3. Clickable Labels

• Available in vertical mode with left/right positions
• Active when no thumb snippet is provided
• Renders real <button> elements with keyboard activation

Label Priority

1. label snippet (full custom)
2. labelMember (object property)
3. labelCallback (computed string)
4. Default: "Option N"

label snippet (v2.0)

The label snippet (renamed from 1.x's labelTemplate) gives full control over per-item label rendering.

Snippet Parameters

• index — Index of this item (was currentIndex)
• item — The item data (typed as T | undefined)
• isSelected — Boolean for selection state

When to Use

• Multi-line labels with descriptions
• Icons with text
• Conditional content based on selection
• Custom styling per state

When to Hide Labels

• When space is limited
• When using self-explanatory icons
• In compact UI designs
• When labels are shown elsewhere

Note: segment vs thumb

The icons example uses the segment snippet — it renders once per step background. Use thumb instead if you only want content inside the moving thumb.