> 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: States

## Article: States

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/states.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# States
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](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-filters.md), and [style overrides](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/presets.md#preset-defaults-vs-style-overrides).

## Where to define

You can define `states` in [`editorElement`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md) and in [`elements`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md) of type `inlineElement`.

<blockquote className="tip">

**Tip:** You can filter which states appear in the editor using [`displayFilters`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-filters.md) at the preset or element level.

</blockquote>

## CSS style defaults for states

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](#statesdefaultvalues) below.

## State item properties

Each item in the `states` map accepts the following properties:

<PropertyList bordered>
  <Property
    name="displayName"
    type="string"
    description="Label shown in the state selector. Maximum 100 characters. Translatable."
  />
  <Property
    name="props"
    type="map<string, Value>"
    description="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."
  />
  <Property
    name="className"
    type="string"
    description="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."
  />
  <Property
    name="pseudoClass"
    type="NativeStateType"
    description="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."
  >
    <ExpandableSection name="NativeStateType values">
      <PropertyList>
        <Property
          name="'hover'"
          description={<>Applied when a user's pointer is over the element. Maps to CSS <a href="fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">:hover</a>.</>}
        />
        <Property
          name="'focus'"
          description={<>Applied when the element has received focus. Maps to CSS <a href="fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/:focus">:focus</a>.</>}
        />
        <Property
          name="'disabled'"
          description={<>Applied when the element is disabled. Maps to CSS <a href="fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled">:disabled</a>.</>}
        />
        <Property
          name="'invalid'"
          description={<>Applied when the element's value fails validation. Maps to CSS <a href="fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid">:invalid</a>.</>}
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="displayFilters"
    type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-filters">DisplayFilters</a></>}.md
    description="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."
  />
</PropertyList>

## Visible state

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.

<PropertyList bordered>
  <Property
    name="stateKey"
    type="string"
    required
    description="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."
  />
  <Property
    name="elementPath"
    type="string"
    required
    description="Path to the element that owns the state, using the pattern /elementKey/elementKey. 1 to 500 characters."
  />
</PropertyList>

## Examples

### statesDefaultValues

Setting default CSS values per state. When a Wix user selects the hover state in the design panel, `backgroundColor` shows `#f0f0f0` instead of `#ffffff`.

```typescript
editorElement: {
  cssProperties: {
    backgroundColor: {
      defaultValue: '#ffffff',
      statesDefaultValues: {
        hover: '#f0f0f0',
      },
    },
  },
  states: {
    hover: { displayName: 'Hover' },
  },
}
```

### Open dropdown state

The following defines a state that opens a dropdown so that its inner elements are visible on stage.

```typescript
editorElement: {
  states: {
    openDropDown: {
      displayName: 'Open Drop Down',
      props: {
        open: true,
      },
    },
  },
}
```

### Loading state with className

The following defines a loading state with a `className` for styling and `props` to activate it on stage.

```typescript
editorElement: {
  states: {
    loadingState: {
      displayName: 'Loading Data',
      className: 'loading',
      props: {
        loading: true,
      },
    },
  },
}
```

### Hover state with pseudoClass

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.

```typescript
editorElement: {
  states: {
    hover: {
      displayName: 'Hover',
      className: 'elementHover',
      pseudoClass: 'hover',
      props: {
        hovered: true,
      },
    },
  },
}
```

```css
.element.elementHover,
.element:hover {
  /** YOUR CSS FOR HOVER STATE */
}
```

### Display filters

The following defines a button hover state that only shows specific CSS properties and hides certain data items when the state is selected.

```typescript
editorElement: {
  states: {
    buttonHover: {
      displayName: 'Button Hover',
      className: 'btn-hover-state',
      pseudoClass: 'hover',
      props: {
        variant: 'primary',
        size: 'large',
        disabled: false,
        loading: false,
      },
      displayFilters: {
        cssProperties: {
          show: ['backgroundColor', 'borderColor', 'color', 'transform'],
        },
        data: {
          hide: ['advancedOptions', 'debugSettings'],
        },
      },
    },
  },
}
```

### Visible state

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`.

```typescript
editorElement: {
  elements: {
    myElement: {
      elementType: 'inlineElement',
      inlineElement: {
        selector: '.my-element',
        displayName: 'My Element',
        visibleState: {
          stateKey: 'showAdvanced',
          elementPath: '/settingsPanel/advancedOptions',
        },
      },
    },
  },
}
```

### States with CSS style defaults

The following defines a `border` property with a dashed green default and a solid red override for the error state.

```typescript
editorElement: {
  cssProperties: {
    border: {
      displayName: 'Main component Border',
      defaultValue: 'dashed 2px green',
      statesDefaultValues: {
        error: 'solid 2px red',
      },
    },
  },
  states: {
    error: {
      displayName: 'Error',
    },
  },
}
```

## See also

- [Display Filters](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-filters.md)
- [Style Overrides](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/presets/style-overrides.md)
- [About the Editor React Component Manifest](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md)