On this page

When you hover over a button, it should look different. When a checkbox is checked, it should show a checkmark. Interactive states let you define these visual variations by naming your variants with state suffixes — Moio handles the switching automatically.

## The naming convention

Interactive states are encoded directly in variant names using colons:

```text
Button           → Default state
Button:hover     → Hover state
Button:active    → Active (pressed) state
Button:hover:active → Both hover and active
```

The part before the first colon is your base component name. Everything after is a state. You can combine multiple states by adding more colons.

## States by behavior

Different behaviors support different states:

| Behavior | Available states |
| --- | --- |
| **button** | `:hover`, `:active`, `:hover:active` |
| **checkbox** | `:checked`, `:unchecked`, plus `:hover` variants |
| **radio** | `:checked`, `:unchecked`, plus `:hover` variants |
| **toggle** | `:on`, `:off`, plus `:hover` variants |
| **none** | No automatic states |

For checkbox and toggle, you typically want at least two base states (checked/unchecked or on/off) plus their hover variants if you want hover feedback.

## Order doesn't matter

Moio normalizes state names alphabetically. These all resolve to the same state:

- `Button:active:hover`
- `Button:hover:active`

Name them however feels natural — Moio will match them correctly.

## The Default state

A variant without any state suffix is your **Default** state. In the state menu, it appears as "Default" and is always listed first.

## Adding states quickly

When you select a component set, the **Add state** menu shows states you haven't created yet. Select one to add a new variant with that state suffix — a fast way to build out all your interaction states without manual naming.

## Troubleshooting

### Why is "Add state" missing?

Select the component set itself, not an instance or child layer. The Add state menu only appears for component sets.

### My states aren't switching in preview

Check that:

1. The component set has the correct behavior assigned
2. Your variant names follow the naming convention (base:state)
3. You're previewing an instance, not the component itself

### I named my states differently but they're treated as the same

Moio normalizes state order. `Button:active:hover` and `Button:hover:active` are the same state. This is intentional — it prevents duplicate states from different naming conventions.