How to select one or several elements

In TeleportHQ, you select an element by clicking it on the canvas or in the layers tree. Its settings then open in the right panel. To reach the element around it, click the name label above the selection or press Esc. To change several elements at once, hold Cmd (Mac) or Ctrl (Windows) and click each one, or drag a box around them.

Select one element#

1. Move the mouse over the canvas. The element under the pointer gets a thin outline and shows its name.
2. Click once. The element gets a solid outline, a name label above its top-left corner and, where possible, resize handles.

You can also click a row in the layers tree under Pages, Components & Tree View. The canvas scrolls to that element. See How to use the layers tree to find and select elements.

The outline color tells you what you selected in TeleportHQ:

• Blue: a regular element.
• Purple: a component copy, which selects as one unit. See What are components, and when should I use them?
• Pink: an element inside a component copy that you can change for that copy only.

Select the element around it (the parent)#

When you click a text inside a card, TeleportHQ selects the text. To select the whole card:

1. Click the name label above the selected element. Up to three parent names appear above it.
2. Click the parent you want.

Or press Esc to select the parent. Each press moves one level up. You can also right-click the element and choose Select Parent.

Select a child or a neighbor with the keyboard#

• Enter selects the first element inside the selected one. On a text, it starts editing.
• Tab selects the next element at the same level. Shift+Tab selects the previous one.
• Cmd+A or Ctrl+A selects all elements at the same level.

Select several elements#

Selecting several elements in TeleportHQ lets you apply the same style to all of them, for example the same padding on three buttons.

• Cmd-click or Ctrl-click: hold Cmd (Mac) or Ctrl (Windows) and click each element, on the canvas or in the layers tree. Click a selected element again to remove it from the selection.
• Shift-click: click one element, then hold Shift and click another element at the same level. Everything between them is selected.
• Drag a box: press and drag on the empty grey area around the page, or on the page background. You can also hold Cmd or Ctrl and drag anywhere on the page. Every element the box touches is selected.

The canvas shows one box around the whole selection, with a single label. It shows the shared type, or "Mixed" for different types. Press Esc to clear a selection of several elements.

Check that it worked#

The selected element or elements have an outline and a label on the canvas, the matching rows are highlighted in the layers tree, and the right panel shows their settings.

Troubleshooting#

Clicking selects a whole component instead of the element inside it The element belongs to a component. Double-click the component to open it and select elements inside. See How to edit a component and update every copy.

Double-clicking opens the Assets Manager or a text cursor instead of selecting Double-click does something different for each element: it edits text, opens the Assets Manager for images and videos, or opens a component. Use a single click to select.

Clicking an element does nothing while someone else is in the project A collaborator is editing that element, so it's locked for you until they finish. See Why can't I select an element someone else is editing?

A hidden element can't be selected on the canvas Hidden elements have no outline on the canvas. Select them in the layers tree. See How to hide an element.

Shift-click selects only one element Shift-click works only between elements at the same level (inside the same parent).

Good to know#

• With several elements selected, there are no resize handles.
• You can't select elements from two different component copies at the same time.
• Selection display options are in the Project settings cog at the bottom of the left sidebar: Editor → Preferences → View → Selection. For example, Highlight the parent when selecting an element (on by default) outlines the parent of the selected element too.
• While the Comments panel is open, the selection shows only its label.