Element States (Hover, Active, Focus)

Define how your elements look and behave in different interaction states -- hover, focus, active, and more. The States section in the right sidebar lets you map CSS pseudo-classes to component variants, so your designs respond to user input without writing code.

Overview

Element states in Flowmo connect CSS pseudo-classes (like :hover or :focus) to component variants. When a user interacts with your published site -- hovering over a button, tabbing into an input, clicking a link -- the browser activates the matching pseudo-class and Flowmo switches the element to the variant you assigned.

The States section works in two modes depending on what you have selected:

• Classic Mode -- available on component masters and instances. You add states from a list, then assign a variant to each one. When the pseudo-class activates, the element switches to that variant.
• Dimension Variant Mode -- available on dimension variants. Instead of switching variants, you directly edit styles for each pseudo-class. Changes are applied as CSS pseudo-class rules.

Prerequisites

• You have a project open in the Flowmo designer.
• You have selected a component (master or instance) or a dimension variant.
• The component has at least one variant defined (besides the default) if you are using Classic Mode.
• The right sidebar is visible and the States section is accessible.

---

Available states

Flowmo provides nine built-in CSS states. Each one maps to a standard CSS pseudo-class (or class-based selector):

State	CSS selector	When it activates
Hover	:hover	The user's pointer is over the element
Visited	:visited	The link has been visited before
Focus	:focus	The element has keyboard or programmatic focus
Blur	:blur	The element has lost focus
Active	:active	The element is being pressed (mousedown/touch)
Focus Visible	:focus-visible	The element has focus and the browser determines a visible indicator is needed (typically keyboard navigation)
Focus Within	:focus-within	The element or one of its descendants has focus
Input Filled	:not(:placeholder-shown)	An input field has a value (the placeholder is no longer visible)
Current URL	.current-url class	The link's href matches the current page URL (class-based, not a pseudo-class)

---

Classic Mode: variant-switching states

Classic Mode is what you see when you select a component master or a standard component instance. States are listed as rows, each mapping a pseudo-class to a variant.

Step by step: adding a state

1. Open the States section

Select your component on the canvas. In the right sidebar, find the States heading. If no states are defined yet, you will see the message: "No states defined for this variant."

2. Add a state

Click the + button next to the States heading. A popover opens with the list of available states:

• Hover
• Visited
• Focus
• Blur
• Active
• Focus Visible
• Focus Within
• Input Filled
• Current URL
• Advanced Mode (at the bottom, separated by a divider)

Click the state you want to add. A new row appears in the States list.

3. Assign a variant

Each state row has a Variant dropdown on the right side. Open it and select the component variant that should be displayed when this state is active.

For example, if your button component has a "Pressed" variant with a darker background, select "Pressed" for the Active state.

4. Remove a state

Hover over a state row to reveal the trash icon on the right. Click it to remove the state.

---

Advanced Mode: the State Machine Builder

For complex scenarios where simple pseudo-classes are not enough, Advanced Mode lets you build compound selectors that combine ancestor context, combo classes, and element states.

Opening the State Machine Builder

You can enter Advanced Mode in two ways:

• Click + in the States section and choose Advanced Mode at the bottom of the popover.
• Click the gear icon that appears when you hover over any existing state row.

Both open the State Machine Builder popover, which has three sections:

Chain Preview

At the top of the builder, a visual chain shows the current selector you are building. Each segment is a colored pill:

• Amber pills represent ancestor context classes
• Blue pills represent the element's own combo classes
• Purple pills represent pseudo-class states

Click the X on any pill to remove it. A live CSS selector preview is shown in the top-right corner as monospace text.

Context section

The Context area lists your element's ancestor elements and their available classes. Use this to create selectors that depend on a parent's state -- for example, "when the nav container has the class open and is in :hover state."

• Click a class name to add it to the context chain.
• Click it again to remove it.
• Use the Add State button next to an ancestor to attach a pseudo-class to that context segment.

Available quick states for context segments:

State	Selector
Hover	:hover
Focus	:focus
Active	:active
Disabled	:disabled
First Child	:first-child
Last Child	:last-child

Element State section

Below the context area, the Element State row lets you set a pseudo-class on the element itself. Click one of the state buttons:

• None -- no pseudo-class on the element
• Hover, Focus, Active, Disabled, First Child, Last Child

The active button is highlighted in purple.

Saving

Click Save State to apply your advanced selector. Click Cancel to discard changes. The state row now shows "Advanced State" with the full selector preview below it in monospace.

---

Dimension Variant Mode: direct pseudo-class editing

When you select a dimension variant, the States section switches to a streamlined toggle interface labeled State Mode.

How it works

1. A row of state buttons appears: Base, Hover, Visited, Focus, Blur, Active, Focus Visible, Focus Within, Input Filled.
2. Click a state button to activate it. The button highlights in purple and the active pseudo-class is shown as a badge (e.g., :hover).
3. While a state is active, any style changes you make in the design panel are applied as CSS pseudo-class rules for that state.
4. Click Base to return to editing the element's default styles.

The helper text reads: "Select a state, then edit styles. Changes apply as CSS pseudo-class rules."

---

Tips

• Start with Hover. It is the most common interactive state and gives immediate visual feedback. Add a Hover state, assign a variant with slightly different colors or a subtle transform, and pair it with a transition for smooth animation.
• Use Focus Visible for accessibility. If you customize focus styles, prefer Focus Visible over Focus. It only shows a visual indicator when the user is navigating with a keyboard, keeping mouse interactions clean.
• Input Filled is great for form UX. Use it to style labels or borders differently once a user has typed something into a field. It maps to :not(:placeholder-shown), so it only activates when the input has a value.
• Current URL highlights active navigation links. Unlike the other states, Current URL uses a class (.current-url) rather than a pseudo-class. Flowmo adds this class automatically when the link's destination matches the current page.
• Advanced Mode is powerful but rarely needed. Most interactive states can be handled with simple state-to-variant mappings. Use Advanced Mode when you need context-dependent states (e.g., "change this button's style when a parent container has a specific class and is hovered").

Common issues

Problem	Cause	Fix
States section does not appear	The selected element is not a component (master or instance) or a dimension variant	Wrap your element in a component first, or select the component itself
No variants available in the dropdown	The component only has a default variant	Create at least one additional variant before adding states
Hover state works in preview but snaps instead of animating	No transition is configured	Add a transition in the Transitions section to animate the property changes
Advanced selector has no effect	The context classes or ancestor structure changed	Re-open the State Machine Builder and verify that the ancestor classes still match
Dimension variant styles are not saved for a state	You edited styles while the Base button was active	Click the state button (e.g., Hover) first, then make your style changes

Related articles

• Transitions and Easing -- animate the style changes triggered by states
• Components and Instances -- create variants to use with state mappings
• Design System Variables -- use variables for consistent state styling across your project