Interactive components

An interactive component switches between its own variants when someone uses it. A toggle flips from Off to On, a tab bar shows another tab, an accordion opens. You set it once, on the component, and every instance on every screen works the same way in Preview, on your published site and in exports.

You need a component with variants first. If you have not made one, start with Components and variants.

Make a toggle

1. Make a component set with two variants, for example State Off and On.
2. Select the Off variant in the set, open the Prototype tab and press + next to Interactions.
3. Leave the trigger on On click, and choose Change to as the action.
4. In Variant, choose the On variant.
5. Do the same on the On variant, changing to Off.

Every instance of the toggle now flips when clicked. The canvas draws a line from the layer to the variant it changes to.

You can also set it on a single instance, or drag the ring from a variant onto another variant of the same set.

Choose how it changes

A Change to between variants has its own Animation:

• Instant: it switches at once.
• Dissolve: one variant fades into the other.
• Match layers: layers with the same name in both variants move and resize between them; the others fade. This is how a toggle’s knob slides across.

Animated changes have an easing and a duration, like any interaction. See Screen animations and easing.

Hover and press states

With While hovering or While pressing, Change to shows the other variant only while the pointer is over the layer or holding it down. It goes back by itself when the pointer leaves or lets go.

A plain button layer has simpler states of its own in the Prototype tab, under States: Hover fill, Pressed fill, Focus ring and Disabled. Any other layer can get a lift on hover with While hovering and Change to (it starts at 104%), or a press with While pressing (96%).

Swap an icon

If the component has an instance swap property, Change to can swap that instance too, for example a chevron that turns into a cross when a menu opens.

Tabs, accordions and switches that work with a keyboard

uxdeck reads what your variants do and makes them real controls in Preview and on your site:

• Tabs: a row of tabs that each change the same property to a different value, with one other layer that changes with them, becomes a tab list. The arrow keys move between tabs, and screen readers announce each tab and its content.
• Accordions, dropdowns, menus and switches: Enter opens, closes or flips them, and screen readers hear whether one is open or on.

You do not set anything for this: it follows from how the variants are built.

Catches

• Change to needs a component with variants. On a layer that is not part of one, the panel says “Change to needs a component with variants: make this layer part of one.”
• Tabs are only recognised when the structure proves it: at least two tabs setting the same property, each to a different value, exactly one showing. Names like open/closed or on/off read as an accordion or a switch instead.
• Tabs that each go to another screen are navigation, not tabs.
• Preview remembers which variant each instance shows while it plays; Restart puts them all back.
• Generate states can build a tidy, interactive component set for you to start from.

Interactive components are on every plan. The React export plays them too (exports are on Pro).