The multi-state box contains multiple states with different content and displays one state at a time. You need to code to your site to define when each state is displayed.
To use the Multi-State Box:
1: Enable Dev Mode
2: Add Panel > Layout Tools > Multi State Box
3: Visit the Velo API to learn more on changing states
One of the most important elements but Editor X still not ready for me 
Once again no BETA release for me. I have not seen one BETA released to my account. No Multilingual, No Multi State Box, No Customizable Buttons. These are all featured I have been desperately waiting for and they just are not getting applied to my account. I am signed up as a partner and Beta tester, but still can not see any beta releases. I tried removing myself from the beta group and re adding myself, created new sites under my account, etc… Any suggestions???
I really enjoy it.
Just one bug (on EditorX):
If you work on a state on the editor and publish the site. This state will appear first on the live site even though it’s not the first state in order.
You have to remember to switch to the first state before publishing. and you don’t always remember.
Hey got some feedback, I just started to play with the multi-state beta, I’ve been waiting for multi-step forms but that doesn’t seem to be coming any time soon and the Multi-step feature can do the same thing I just have to learn some code. But I’ve had issues with the box not formating correctly in mobile. Support helped me with it by just creating a new page.
Also I believe it will solve a issue I’ve had regarding creating a dashboard for my clients for my web experience, adding the ability to easily expand the multistate box in a section or container would help a lot.
Thanks for the feedback Anthony, I’ll share it with the team.
Hi,
Another minor bug:
When you change the name of a certain State, the old name still will still appear in the Layers bar (unless you rename it there too).
Any update on when this will be launching in prod?
A feature request for this is to be able to expand easily into a section or container box.
When is this releasing? 
I’ve been having issues with the button not working on the initial state.
Can you post the code you used? Have you checked the console?
@wingcc Thanks for asking. Here’s the code for this form.
import { local } from ‘wix-storage’ ;
let multi = $w ( “#multiStateBox1” );
let toPlusBar ;
let toMinusBar ;
$w . onReady ( function () {
let data = JSON . parse ( local . getItem ( “listingRental” )); // “value”
data ?. title != undefined && data.title != null ? $w ( “#listingTitle” ). text = data.title : $w ( “#dropdown14” ). expand () && $w ( “#listingTitle” ). collapse ();
console . log ( ‘data’ , data );
let states = multi.states ;
console . log ( ‘states’ , states );
setPlus ( states.length );
//next
$w ( “#btnNext1” ). onClick (() => {
if ( $w ( “#dropdown13” ). value != “I’m a real estate agent submitting an offer” ) {
loadNextPlus ( states , 2 );
} else {
loadNext ( states );
}
})
$w ( "#btnNext2" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext3" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext4" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext5" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext6" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext7" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext8" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext9" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext10" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext11" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext12" ). onClick (() => {
loadNext ( states );
})
$w ( "#btnNext13" ). onClick (() => {
$w ( "#dataset2" ). setFieldValue ( "listing" , data._id );
})
//back
$w ( "#btnBack2" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack3" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack4" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack5" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack6" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack7" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack8" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack9" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack10" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack11" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack12" ). onClick (() => {
loadBack ( states );
})
$w ( "#btnBack13" ). onClick (() => {
loadBack ( states );
})
});
function setPlus ( size ) {
toPlusBar = parseFloat ( 100 / size );
toMinusBar = parseFloat (- 100 / size );
}
function updateBar ( toSum ) {
let progressValue = $w ( “#progressBar1” ). value ; // 42
let newvalue = progressValue + toSum ;
$w ( “#progressBar1” ). value = newvalue ;
}
function goToState ( id ) {
if ( id != ‘’ ) {
multi . changeState ( id );
}
}
function loadNext ( states ) {
let current = multi.currentState ;
const indexCurrent = states . findIndex ( state =>
state.id == current.id
);
let indexNext = indexCurrent + 1 ;
let next = indexNext < states.length ? states[indexNext ]. id : ‘’ ; //next id
goToState ( next );
updateBar ( toPlusBar );
}
function loadNextPlus ( states , number ) {
let current = multi.currentState ;
const indexCurrent = states . findIndex ( state =>
state.id == current.id
);
let indexNext = indexCurrent + number ;
let next = indexNext < states.length ? states[indexNext ]. id : ‘’ ; //next id
goToState ( next );
updateBar ( toPlusBar + toPlusBar );
}
function loadBack ( states ) {
let current = multi.currentState ;
let indexCurrent = states . findIndex ( state =>
state.id === current.id
);
let indexBack = indexCurrent - 1 ;
let back = indexBack >= 0 ? states[indexBack ]. id : ‘’ ; //next id
goToState ( back );
updateBar ( toMinusBar );
}
When this feature is going to be released on Classic Editor???
It’s been on the classic editor for a while, no?
Will Multi-State Boxes for Wix Editor and Editor X ever allow full width feature?