Components

Design a button once, use it everywhere. Components let you create reusable elements — update the source and every instance updates with it. Add a behavior, and your component gains built-in interaction states like hover and checked, no extra wiring needed.

What is a component

A component is a reusable design element that lives within a single Moio file. You design it once, then place instances of it throughout your file. Edit the source component and all instances reflect the change.

Components are file-local — every component belongs to the file it was created in. There's no global or shared component library yet.

Variants let you create variations of the same component (like a primary and secondary button). They live together inside a component set.

States bind a component's visual design to interactive states like :hover or :checked. When you assign a behavior to a component set, Moio automatically switches between states based on user interaction in preview.

Creating a component

1. Select one or more objects on the canvas.
2. Right-click and choose Create Component (or press Ctrl+Alt+K / Cmd+Option+K).

What happens depends on your selection:

• Single frame — The frame converts into a component in place.
• Multiple objects — They're wrapped in a new component frame.

You can't create a component inside another component. If your selection contains existing components, they're moved out and replaced with instances.

Inputs

Inputs make your component dynamic. Instead of hardcoding text or visibility, you define an input on the component and let each instance set its own value.

Defining inputs

1. Select your component.
2. In the Properties panel, find the Inputs section.
3. Click Add input.
4. Choose a type, give it a name, and set an initial value.

Type	Default value	Use for
String	""	Text content
Number	10	Opacity, numeric values
Boolean	true	Show/hide toggles

Binding inputs to properties

Once you've defined an input, you can bind it to a property on any element inside the component. Look for the green + button next to these bindable properties:

Property	Accepts	What it controls
Content	String inputs	Text content
Display	Boolean inputs	Visibility (show/hide)
Opacity	Number inputs	Transparency level

Click the + button to see a menu of matching inputs (filtered by type). Select one to bind. The field locks and shows the bound input name. To unbind, open the menu again and choose Detach.

See Data binding for the full workflow including instance-level assignments.

Instances and overrides

When you place an instance on your canvas, it references the source component and stays in sync. The Properties panel shows:

• Variant — Switch between variants in the component set
• State — Set the current visual state
• Initial value — For checkbox, radio, and toggle behaviors, choose the starting state

Overriding properties

You can override specific properties on an instance without affecting the source or other instances. To undo overrides, use the header menu:

• Reset name — Restore the original name
• Reset size — Restore the original dimensions
• Reset inputs — Clear input value overrides
• Reset all changes — Restore everything to match the source

Variants

Variants are different versions of the same component grouped in a component set. Create them by duplicating a component inside a set and renaming it.

The naming convention uses colons to separate the base name from states:

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

State order doesn't matter — Moio normalizes states alphabetically, so Button:active:hover and Button:hover:active resolve to the same variant.

See Interactive states for the full naming reference.

Component sets

A component set groups related variants together. Select multiple component variants and group them into a set.

The component set has a behavior property that determines which interaction states are available:

Behavior	States	Use for
None	—	Static elements
Button	hover, active	Clickable buttons
Checkbox	checked, unchecked	Multi-select options
Radio	checked, unchecked	Single-select (one per artboard)
Toggle	on, off	Switches

Set the behavior in the Properties panel when the component set is selected.

See Component behaviors for details on how behaviors work, their state lists, and initial value controls.

Interactive component states

States use the :suffix naming convention on variants. When a behavior is set, Moio automatically switches between matching variants in preview.

• States can be stacked: :checked:hover means both checked and hovered.
• The Add state dropdown on a selected component set shows missing states for the chosen behavior — select one to create a new variant with that suffix.

Importing components from Figma

Figma components import into Moio as local component sets. External library components become local copies.

After importing, you'll need to configure the component for Moio's interaction system:

1. Select the imported component set.
2. Choose the appropriate behavior (button, checkbox, etc.) in the Properties panel.
3. Rename variants to use the :state suffix convention so they bind correctly to the behavior's states (e.g., rename "Button - Hover" to "Button:hover").

Troubleshooting

I don't see Variant or State options on my selection

You've selected the component itself or a child layer, not an instance. Select the instance (the top-level container with the component icon).

My button doesn't respond to hover in preview

Check that the component set has the button behavior assigned and that you have a :hover variant defined with that exact suffix.

Changes to my component aren't showing on instances

Make sure you're editing the source component, not an instance. Instances update automatically. If you still don't see changes, check that the instance hasn't been detached.

I can't create a component

You may be trying to create one inside another component. Components can't be nested — move your selection outside the existing component first.

Related

• Component behaviors — behavior types, state lists, and initial values
• Interactive states — naming convention and state normalization
• Data binding — using inputs to drive dynamic content
• Events & actions — adding interactivity beyond built-in behaviors
• Preview — testing your interactive components