View Switcher

A view switcher shows one of several views at a time, animating between them along a shared axis as the active index changes.

First view

Second view

Overview

The view switcher component allows users to toggle between different views of related content using smooth transitions. It employs a shared axis pattern to display transitions between UI elements that have spatial or navigational relationships. This pattern uses shared transformations to reinforce the connection between elements, making content changes feel cohesive and intentional rather than jarring.

The component is commonly used with tabs, navigation controls, or other switching mechanisms to control which view is actively displayed while maintaining the relationship between different content states.

Usage

forge-view-switcher shows one forge-view child at a time, set via index and transitioning with animationType (none, slide, or fade), plus next()/previous()/goToStart()/goToEnd() for programmatic control. Drive its index from whatever is switching views — most often a tab bar’s change event, or a stepper’s selected step. The slide/fade transitions reinforce that the views are spatially related, the same way switching tabs in a card should feel connected rather than like a hard cut.

Inactive views stay mounted in the DOM — switching index doesn’t unmount them. Account for that if an inactive view has running scripts or timers, or holds an element id that must stay unique across the page.

Rules

Drive index from the control that owns the switching decision — a tab bar or stepper — rather than duplicating that state.

Use a slide or fade transition when the views are spatially or navigationally related, so the motion reinforces that relationship.

Keep every view's content sized similarly so the transition doesn't jump awkwardly in height.

Don't

Don't use a view switcher for views that have no real relationship to each other — a hard cut may read more honestly.

Don't drive index from more than one source at a time — pick a single owner for the active index.

Basic usage

A tab bar’s change event sets index on the view switcher below it, showing the matching forge-view.

A tab bar drives which view is active in the switcher below it.

<forge-tab-bar active-tab="0" data-aria-label="Demo tabs">
  <forge-tab selected>
    Tab 1
  </forge-tab>
  <forge-tab>
    Tab 2
  </forge-tab>
  <forge-tab>
    Tab 3
  </forge-tab>
</forge-tab-bar>
<forge-view-switcher index="0">
  <forge-view name="view1">
    View 1 content
  </forge-view>
  <forge-view name="view2">
    View 2 content
  </forge-view>
  <forge-view name="view3">
    View 3 content
  </forge-view>
</forge-view-switcher>

Animation

Set animationType to fade for a cross-fade between views instead of the default hard cut.

A fade transition between views instead of a hard cut.

<forge-view-switcher index="0" animation-type="fade">
  <forge-view name="view1">
    View 1 content
  </forge-view>
  <forge-view name="view2">
    View 2 content
  </forge-view>
</forge-view-switcher>

A container component that manages switching between multiple child `<forge-view>` elements with configurable animations and programmatic navigation controls.

import "@tylertech/forge/view-switcher";

Properties

Property	Attribute	Type	Default	Description
`index`	`index`	`number`	`0`	Gets/sets the currently visible view index.
`animationType`	`animation-type`	`${ViewSwitcherAnimationType}` \| ViewSwitcherAnimation	`"none"`	Gets/sets the animation type.

CSS Custom Properties

Name	Description
`--forge-view-switcher-height`	The `height` of the view switcher.
`--forge-view-switcher-width`	The `width` of the view switcher.
`--forge-view-switcher-animation-duration`	The duration of view switching animations.
`--forge-view-switcher-animation-easing`	The timing function of view switching animations.

Methods

Name	Returns	Description
`next()`	`void`	Transitions to the next view.
`previous()`	`void`	Transitions to the previous view.
`goToStart()`	`void`	Transitions to the first view.
`goToEnd()`	`void`	Transitions to the last view.

Keyboard interaction

Verify that you can tab into a forge-view’s content, and that every element inside it is reachable and operable using only the keyboard.