> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: $w

## Namespace: multi-state-box

## Article: Introduction

## Article Link: https://dev.wix.com/docs/velo/velo-only-apis/$w/multi-state-box/introduction.md

## Article Content:

# Introduction
A [multi-state box](https://support.wix.com/en/article/studio-editor-using-multi-state-boxes) is a container that holds multiple states, each displaying different content. You need to add code to control which state is displayed. You can set a multi-state box to change base on:

- Specific situations:
   - Show different site content when a shopping cart is empty or full.
   - Display an error state when something goes wrong.
   - Show a preloader while a page is loading.
   - Display different content based on upcoming events.
- Site visitor interaction:
   - Navigate between what appear to be multiple tabs.
   - Switch between a brief description and a detailed block of text.

<blockquote class="important">

__Important:__ Changing the box state might [impact your page layout.](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/formatting-layout/how-page-layout-is-affected-when-elements-change-size.md)
</blockquote>

### State IDs
Each multi-state box and state has a unique ID. To refer to them in code, you might want to rename them to more logical names. To view and rename state IDs: 
1. Select the multi-state box and click **Manage States**. 
2. Click the **More Actions** button and click **Rename** (Wix Studio) or **Edit ID** (Wix Editor). 

You can also change the multi-state box ID and state IDs in the [Properties & Events](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) panel. 

<blockquote class="caution">

__Caution:__ Changing the ID of a multi-state box or state breaks any existing code. If you change an ID, update any related code.
</blockquote>

### Accessibility
It's important to ensure that multi-state boxes are accessible to all visitors. You can enhance your site's accessibility by: 
- Adding [accessibility](https://dev.wix.com/docs/velo/velo-only-apis/$w/multi-state-box/accessibility.md) properties for the multi-state box either through code or by setting them in the editor. 
- Focusing on an interactive element, such as a button, inside the multi-state box after a state changes.

This approach: 
- Allows site visitors to directly access elements in the multi-state box using keyboard navigation. 
- Provides a visible indication of which element is currently selected. 
- Enables screen readers to convey context, helping visitors see, hear, and understand the displayed content and available actions. 

### SEO
Google's crawlers access only the content that would be initially displayed in the multi-state boxes. This may impact SEO if important information is hidden within these boxes. Learn more about [SEO best practices.](https://dev.wix.com/docs/develop-websites/articles/best-practices/seo-best-practices.md)

### See also
- Get hands-on experience with multi-state box on our [Hello Multi-state Boxes](https://dev.wix.com/docs/coding-examples/getting-started/hello-world/hello-multi-state-boxes.md) example page.