Variants and interactive states

A component set groups the variants of one component, and the layer name of each variant says which variant and which state it is. You need it when instances have to react to the pointer or remember a checked state in preview: a component behavior switches between the state variants you have drawn. Also called: interactive components, hover and pressed states.

A component behavior (Button, Checkbox, Input, Radio button, Toggle) belongs to a component set. For the object behaviors Draggable, Resizable and Sortable see object behaviors; for Scrollable and Pannable see Scrolling in preview.

Component sets and variants

Where: select two or more standalone components → Properties panel → Combine as variants. Select one component or one component set → Properties panel header → the diamond button with a plus (tooltip Add variant).

• Add variant on a standalone component wraps it in a new set first. With the set selected, it duplicates the top-left variant. With a variant selected, it duplicates that variant.
• A set holds only components and guides. A plain frame dropped into a set in the Layers panel, or pasted into it, becomes a variant, unless it contains a component. No other layer goes in, and sets don't nest.
• There are no variant properties. The layer name alone tells variants and states apart.
• Duplicating or pasting inside a set also yields variants (→ How instances come about).

Naming states

A variant's layer name reads Variant:state. The text before the first colon is the variant name, every colon-separated part after it is a state: Primary, Primary:hover, Secondary, Secondary:hover are two variants with two states each. A name without a suffix is the Default state.

The name is what ties a variant to a state, and it follows CSS pseudo-classes. In CSS, button:hover selects a button while the pointer is over it. In Moio, Primary:hover is the variant that the set's behavior shows on an instance of Primary while the pointer is over it. :hover, :active, :focus and :checked mean what they mean in CSS, and they chain the same way: :checked:hover. :unchecked, :on, :off and :placeholder are Moio's own names, for states that CSS writes differently.

One thing differs from CSS. A :hover rule in CSS changes a few properties on top of the normal style. A state variant is a complete drawing of its own: a layer, an event or a slot frame that Primary:hover lacks is absent while it shows (→ Events on state variants, slots in variants).

• Spell the variant-name part identically across its states. The Variant dropdown groups by the exact text before the first colon: Primary and primary:hover show up as two variants.
• States combine, and their order is irrelevant: :checked:hover and :hover:checked are the same state. Letter case and spaces around the colons are ignored in the state part.
• Of two variants with the same variant name and state, a behavior uses the one higher in the Layers panel.
• A behavior never switches to a suffix it doesn't understand. With No behavior any suffix is a state, picked by hand (→ Variant and State on an instance).
• Renaming several variants at once keeps every suffix the set's behavior understands: Primary:hover renamed to Main becomes Main:hover. With No behavior the whole name is replaced.

Component behavior

Where: select a component set or one of its variants → Properties panel → the dropdown without a label (tooltip Behavior).

Option	In preview
No behavior	Nothing switches on its own.
Button	Follows the pointer: hovered, pressed.
Checkbox	Follows the pointer; a click flips the checked state.
Input	A text field to type into (→ Text fields and forms).
Radio button	Follows the pointer; a click checks it, never unchecks it (→ Radio groups).
Toggle	As Checkbox, with the states :on and :off.

• A behavior runs in preview only. The canvas shows the variant you picked, or the one that matches Checked.
• State switches in preview are instant.

Add state — the Properties panel header button with two dots and a plus (tooltip Add state), shown while the set has a behavior — lists the common states of the behavior. Picking one creates it for every variant name that lacks it, as a copy of an existing state of that variant. The menu leaves out :active for Checkbox, Radio button and Toggle, and every :active:hover and :focus:hover; create those by naming a variant yourself.

States per behavior

Behavior	Base states	Added to each base state
Button	Default	:hover, :active, :active:hover
Checkbox	:unchecked, :checked	:hover, :active, :active:hover
Radio button	:unchecked, :checked	:hover, :active, :active:hover
Toggle	:off, :on	:hover, :active, :active:hover
Input	Default, :placeholder	:hover, :focus, :focus:hover (→ Text fields and forms)

• :active means pressed. The parts combine as :checked:active:hover.
• Checkbox, Radio button and Toggle have no Default state: name the two base variants :unchecked and :checked, or :off and :on.
• Only the base states are required. Within the current base state, preview shows the first variant that exists — :active:hover → :active → :hover → base state while pressed and hovered, :hover → base state while hovered.
• When the base state is missing too, the instance stays on the variant it shows in the editor.

Checked and the starting state

Where: component set → Inputs → Checked; instance → the Checked row.

• Checkbox, Radio button and Toggle add the built-in Boolean input Checked to the set (→ Defining inputs). It sets the state an instance starts in when preview loads, and which base variant the editor shows for it.
• The value on the set is the default for all instances; the row on an instance overrides it (→ Assigning inputs on instances).
• Clicks in preview change the state for the session only. A Reset action on the instance returns it to Checked (→ Reset).
• Actions on a viewer's click go on the Check and Toggle events.

Radio groups

Radio button instances with the same layer name inside the same artboard form a group, at any depth. Checking one unchecks the others.

• Radio buttons with different names are independent, also on the same artboard. One outside any artboard belongs to no group.
• The editor applies the same rule: turning Checked on for one instance turns it off for the rest of its group.

Variant and State on an instance

Where: select an instance of a component set → Properties panel → Variant and State.

• Variant lists the variant names of the set. With a behavior, the instance lands on the base state of the chosen variant that matches its Checked value.
• State lists the states of the current variant, Default first. It is hidden when the set has a behavior, and when the variant has only the Default state.
• With No behavior, a state changes only through State in the editor or a Set Component Variant action in preview.
• Switching to another component or set: Instance swap.

Events on state variants

Each variant carries its own events, and an instance runs the events of the variant it shows: a Click defined only on the default variant is absent while :hover shows. What to do about it: Events belong to a variant.

Related

• Text fields and forms — the Input behavior and the form kit.
• Overrides — what an instance keeps when its variant or state changes.