Introduction

A Multi-state box is a container that holds multiple states, each with different content. A multi-state box displays one state at a time. You can use code to create conditions for each state to appear automatically, or allow site visitors to navigate through the states on their own.

It's important to ensure that your multi-state boxes are accessible to all visitors. For example, by focusing on a button within the multi-state box after a state changes. This allows visitors to directly access elements in the multi-state box with keyboard navigation, provides a visible indication of which element is currently selected, and enables screen readers to read the context, helping visitors see, hear, and understand what content is displayed and what actions are available.

For a tutorial on working with your multi-state box and Velo, click here.

Get hands-on experience with multi-state box on our Hello Multi-state Boxes example page.