Alpha: Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.
The states property lets you define conditions that Wix users can style independently in the editor, such as hover, disabled, and loading. Each key in the states map is the state key, and you use it to reference the state in statesDefaultValues, display filters, and style overrides.
You can define states in editorElement and in elements of type inlineElement.
Tip: You can filter which states appear in the editor using displayFilters at the preset or element level.
To set default CSS values that the design panel shows when a state is active, use statesDefaultValues on your cssProperties or cssCustomProperties items. The key names must match state keys defined in the states map. See the statesDefaultValues example below.
Each item in the states map accepts the following properties:
Label shown in the state selector. Maximum 100 characters. Translatable.
React props passed to the component to preview this state on stage in the editor. Only used in the editor, not on the live site. Pair with pseudoClass to preview pseudo-class states that can't be triggered programmatically.
CSS class name applied to the component when this state is active. Use for custom states without a browser pseudo-class equivalent, like loading or selected. Maximum 100 characters.
Maps this state to a native CSS pseudo-class on the live site, such as :hover or :disabled. Pair with props to preview the state in the editor.
Controls which CSS properties, elements, data items, and custom actions are visible in the editor when this state is active. Applied last, after element and preset filters.
The visibleState property is defined on elements to control an element's visibility based on a state defined on another element. When used, both fields are required.
The state key that controls whether this element is visible. Must match a key in the states map of the owning element. 1 to 100 characters.
Path to the element that owns the state, using the pattern /elementKey/elementKey. 1 to 500 characters.
Setting default CSS values per state. When a Wix user selects the hover state in the design panel, backgroundColor shows #f0f0f0 instead of #ffffff.
The following defines a state that opens a dropdown so that its inner elements are visible on stage.
The following defines a loading state with a className for styling and props to activate it on stage.
The following defines a hover state. The pseudoClass handles :hover on the live site, while the props field allows the component to apply hover styles on the editor stage. Your CSS must target both.
The following defines a button hover state that only shows specific CSS properties and hides certain data items when the state is selected.
The following shows a visibleState configuration on an inner element, making it visible only when the showAdvanced state is active on the element at /settingsPanel/advancedOptions.
The following defines a border property with a dashed green default and a solid red override for the error state.