Component behaviors
A component set can look interactive, but without a behavior it won't do anything in preview. Behaviors bridge the gap — they connect your visual state variants (like :hover or :checked) to actual user interactions, so Moio knows when to switch between them.
How behaviors work
A behavior is a property you set on a component set. It tells Moio which interaction states your component supports and how to respond to user input.
When you set a behavior:
- Moio maps your named variants (e.g.,
Button:hover) to real interactions (cursor hover). - State switching happens automatically in preview — no events or actions needed.
- Some behaviors track internal state (checked/unchecked, on/off) that persists during the preview session.
Behavior categories
Interactive states only
These behaviors respond to user input but don't remember anything between interactions.
Button — Responds to hover and press. When the cursor leaves or the press ends, it returns to default.
States: :hover, :active, :hover:active
Internal state + interactive states
These behaviors remember their state. A checkbox stays checked until clicked again.
Checkbox — Toggles between checked and unchecked on click. Multiple checkboxes can be checked at the same time.
States: :checked, :unchecked, :checked:hover, :unchecked:hover
Radio — Same states as checkbox, but only one radio instance can be checked per artboard. Checking one unchecks the others.
States: :checked, :unchecked, :checked:hover, :unchecked:hover
Toggle — Switches between on and off on click.
States: :on, :off, :on:hover, :off:hover
No behavior
None — No interaction states. The component is static in preview. Use this for decorative or structural elements that don't need interaction.
Behavior reference
| Behavior | Interactive states | Internal state | Initial value control |
|---|---|---|---|
| None | — | No | No |
| Button | :hover, :active | No | No |
| Checkbox | :checked, :unchecked, + :hover combos | Yes (checked/unchecked) | Yes |
| Radio | :checked, :unchecked, + :hover combos | Yes (checked/unchecked) | Yes |
| Toggle | :on, :off, + :hover combos | Yes (on/off) | Yes |
Setting the initial value
For checkbox, radio, and toggle instances, the Properties panel shows an Initial value switcher. This controls which state the component starts in when preview loads.
- Checkbox / Radio: Starts as
:checkedor:unchecked - Toggle: Starts as
:onor:off
Button has no initial value control — it always starts in its default state.
Adding missing states
When you select a component set, the Add state dropdown in the Properties panel header shows states you haven't created yet (based on the chosen behavior). Select one to create a new variant with that state suffix — a quick way to build out all interaction states without manual naming.
Troubleshooting
My component doesn't respond to interaction in preview
Check that a behavior is set on the component set (not "None"), and that your variants are named with the correct state suffixes for that behavior.
I don't see the Initial value switcher
Initial value only appears for checkbox, radio, and toggle instances. Button and None don't have it. Also make sure you've selected an instance, not the source component.
Add state shows no options
Either the behavior is set to None, or you've already created variants for all suggested states.
Related
- Components & behaviors — creating components and component sets
- Interactive states — naming convention and state normalization
- Events & actions — behavior-specific events (Check, Toggle)