Usability features

Learn more about usability features.

Retool includes a number of features to enhance the usability of your apps. These options include additional context or personalization, text and data formatting, notifications, and query confirmations.

Input components

πŸ“˜

Refer to the Component Library for a complete reference of all components and the settings they support.

Most input components, such as Text Input, have settings that help you provide users with greater context.

  • Placeholder: A placeholder appears within the input when it doesn't have a value.
  • Label: A label appears next to the component. You can also include a caption to provide further context.
  • Add-ons: You can enhance inputs with prefix and suffix text or icons, tooltips to display further context when the mouse hovers over the input, and helper text that appears when an input is in focus.

Input add-ons

Available settings appear in the Inspect tab in the Content section.

Formatted data types

Certain components, such as Table, allow you to format the contents based on the data it containsβ€”such as currencies or email addresses. For example, you can set a column of dates to use the Date format. This allows you to customize the date formatting or even adjust the date shown to match the user's local time zone.

Configure column format

Personalize apps for the current user

Retool apps have access to global variables, such as current_user, which allow you to personalize the app. For example, you can include a welcome message that displays the user's name with Welcome {{current_user.firstName}}!.

Markdown text with built-in user variables

Formatted text with Markdown and HTML

You can use Markdown or HTML across a number of surfaces to include rich text or images. Retool renders Markdown and HTML where available. Refer to the Markdown and HTML reference for more information and to preview how this works.

Trigger notifications

You can set up notifications using event handlers that are triggered in response to any supported event. Add a new event handler using the Interaction settings in the Inspect tab, then select Show notification as the action.

Configure notification

In addition to the title and description, you can specify the Type of notification by selecting from the list or dynamically with JavaScript. This represents the severity of the message and changes the color used. You can also control the duration for which notifications are shown before being dismissed.

You can also trigger notifications with JavaScript using utils.showNotification() .

Query prompts

Queries that write or delete data can display a confirmation message before they run. You can enable this in the Advanced tab of a selected query.

Query confirmation