Skip to main content

Assemble web app UI components

Learn how to assemble Retool web app interfaces.

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

Components are the fundamental building blocks of Retool apps. They are prebuilt interface elements to display data, and manipulate or interact with it based on user actions. Refer to the Retool Component Library to browse available components and view reference documentation.

How components work​

You drag and drop components in the App IDE to assemble your app's interface, then configure them to interact with data, perform actions, or render content. Any changes you make to the component's state in the App IDE or by interacting with the component are immediately reflected.

You 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.

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.

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.