Skip to main content

Assemble web app UI components

Learn how to assemble Retool web app interfaces.

note

Components are fully interactive in creator mode. Hold Cmd/ctrl when selecting or moving a component to prevent interacting with it.

Drag-and-drop components to rearrange them on the canvas. Components cannot overlap, so as you move components around, the layout of your app automatically updates and adjusts. All components have a default size (e.g., 2 columns x 5 rows) and built-in spacing.

Resize components​

Most components can be resized to fit a custom area—select a component and then drag from a corner or edge. Certain components, such as Container or Text Area, have fixed sizes that expand to automatically grow with their content. You can set their Overflow setting to Scroll or Hidden using the Inspect tab of the right panel to control this behavior.

tip

You can fine-tune the position of selected components using keyboard arrow keys.

You can configure containers to dynamically adjust their size based on their contents. Set the component's Height to Hug Contents in the component's Layout settings, available in the Inspect tab of the right panel.

Duplicate components​

You can duplicate existing components in the following ways:

  • Click and drag whilst holding Alt.
  • Press ctrl D.
  • Right-click the component on the canvas or in the Explorer tab of the left panel, then select Duplicate.

Hide or disable components​

You can hide any component by setting Hidden to true. You can also disable input components, or set them as read-only, using Disabled or Read only respectively.

note

Hidden components don't take up space on the canvas by default. You can enable Maintain space when hidden to preserve the component's layout regardless of visibility. This can maintain fixed positioning of components, regardless of visibility.

These values evaluate to true based on a truthy value. For example, you can use the state of one component to toggle the Hidden property of another component. Checkbox can be used to toggle the visibility of another component when checked. To do this, set Hidden to {{ checkbox1.value }} on the component you want to hide . This evaluates to true when the checkbox is checked, and false when unchecked.

Disable a component

You can also use event handlers if you need to control components based on user actions. For example, you could use a Button to show or hide a Text Area component.