Retool Apps components reference

Reference documentation for UI components.

Buttons

Button

A button to trigger actions when clicked.

Button GroupNew

A group of buttons to trigger actions when clicked.

Close Button

A button with preconfigured icon that trigger actions when clicked.

Dropdown Button

A dropdown menu with buttons to trigger actions when clicked..

Link

A link to trigger actions when clicked.

Link List

A group of links to trigger actions when clicked.

Outline Button

A button to trigger actions when clicked.

Split Button

A dropdown menu with buttons to trigger actions when clicked..

Toggle Button

A toggle button to trigger different actions when clicked.

Toggle Link

A toggle link to trigger different actions when clicked.

Containers and forms

Collapsible Container

A container to group other components with a preconfigured collapsible body area.

Container

A container to group other components together with flexible layout controls.

Form

A form to group and submit input fields.

JSON Schema Form

A JSON-defined form to group and submit input fields.

StackNew

A container to group other components together in a flexbox layout.

Stepped Container

A container to group other components into a series of steps.

Tabbed Container

A container to group other components into tabbed views.

Wizard

A container for a series of steps with multiple branches and outcomes.

Custom

Custom Component

A custom-built React, or HTML and JavaScript, component.

HTMLNew

A content area to embed HTML and CSS markup.

IFrame

A content area to embed a web page.

Data

Chart

A content area to display charts.

Filter

An interface to define filters for Table components.

JSON Explorer

A content area to display JSON data with collapsible nodes.

Key ValueNew

A content area for viewing and editing key-value data.

Reorderable List

A content area to display a list of text items that can be reordered when dragged.

Table

A table to display data that can be sorted, filtered, paginated, and edited.

Date and time inputs

Calendar Input

An input field to select a specific date on a calendar.

Date

An input field to select or enter a date.

Date Range

An input field to select or enter a date range.

Date Time

An input field to select or enter a date and time.

Day

A dropdown menu and input field to select or enter a day.

Month

A dropdown menu and input field to select or enter a month.

Time

An input field to select or enter a time.

Year

A dropdown menu and input field to select or enter a year.

Frames

Drawer

A container that slides in from the side of the viewport.

Modal

A container that appears above other content.

Sidebar

A container that renders on the left-side of the viewport.

Split Pane

A container that divides the viewport into two resizable panes.

Integrations

Auth Login

A button to perform custom authentication for an API resource.

Looker

A content area to display a Looker dashboard.

Mapbox Map

A content area to embed a map with custom locations.

Stripe Card Form

An embedded Stripe card form.

Tableau

A content area to display a Tableau visualization.

Legacy

Key Value

Display key-value information.

List View

A list that renders each item from an array of data using a custom-built row of components.

Navigation

Breadcrumbs

A secondary navigation menu to trigger actions.

Navigation

A primary navigation menu with nested items to trigger actions.

Page Input

An input field to jump to a specific page of data.

Pagination

A navigation menu to jump to a specific page of data.

Steps

A group of steps that trigger actions when clicked.

Tabs

A group of tabs that trigger actions when clicked.

Number inputs

Currency

An input field to enter a monetary number value.

Editable Number

A click-to-edit input field to enter a number.

Number Input

An input field to enter a number.

Percent

An input field to enter a percentage number value.

Phone Number Input

An input field to enter a phone number.

Range Slider

An input field to select a range of number values.

Rating

An input field to select a rating.

Slider

A slider to select a number value.

Presentation

Alert

A message box to display important information with optional title and clickable action.

Avatar

A content area to display user information and profile image.

Avatar Group

A group of avatars to display information and profile images for users.

Calendar

A content area to display calendar events.

Circular Image

A content area to display a circular image.

Divider

A content area to display a dividing line with optional label.

Event List

A content area to display a list of events.

Icon

A content area to display an icon.

Icon TextNew

A content area to display an icon with accompanying text.

Image

A content area to display an image.

Image Grid

A content area to display images in a grid layout.

PDF

A content area to embed a PDF.

Progress Bar

A content area to display a horizontal progress bar.

Progress Circle

A content area to display a circular progress bar.

QR Code

A content area to display a QR code.

Spacer

An empty area to add space between components.

Statistic

A content area to display primary and secondary number values with optional trend indicators.

Status

A content area to display a status indicator.

Tags

A content area to display a set of tags.

Text

A content area to display Markdown text or HTML content.

TimelineNew

Display a Gantt chart of events.

Video

A content area to display a video.

Repeatables

Container List ViewNew

A flexible list of repeated components with containers.

Grid ViewNew

A repeatable grid of components with values that map to a list of data.

List ViewNew

A repeatable list of components with values that map to a list of data.

Select inputs

Cascader

An input field to select options using a dropdown menu or manually enter a value in a multi-level tree structure.

Checkbox

An input field to toggle a boolean value.

Checkbox Group

A group of checkboxes to toggle boolean values.

Checkbox Tree

A group of checkboxes to toggle boolean values in a multi-level tree.

Listbox

An input field to select an option from a list.

Multiselect

An input field to select multiple options using a dropdown menu or manually enter values.

Multiselect Listbox

An input field to select multiple options from a list.

Radio Group

A group of radio buttons to select a single value.

Segmented Control

A segmented button to select an option from a list..

Select

An input field to select an option using a dropdown menu or manually enter a value.

Switch

An input field to toggle a boolean value.

Switch Group

A group of switches to toggle boolean values.

Special inputs

Annotated Text

An interface to display and annotate text.

Bounding Box

An interface to display a bounding box and tag areas of an image.

Chat

An interface for AI chat conversations.

Color Input

An input field to select a color.

Comment

An interface to display and enter comments.

Comment Thread

An interface to display and enter comments.

File Button

A button to select single or multiple files.

File Dropzone

A drag-and-drop area to select single or multiple files.

File Input

An input field to select single or multiple files.

Microphone

A button to record audio.

Scanner

An interface to scan a barcode or QR code using the device's camera.

Signature

An input field to digitally capture a signature as an image.

Timer

A button to record elapsed time.

Text inputs

Editable Text

A click-to-edit input field to enter a single line of text.

Editable Text Area

A click-to-edit input field to enter multiple lines of text.

Email

An input field to enter an email address.

JSON Editor

An interface to edit and validate JSON.

Password

An input field to enter a password.

Rich Text Editor

An input field to enter text with rich formatting.

Text Area

An input field to enter multiple lines of text.

Text Input

An input field to enter a single line of text.

URL

An input field to enter a URL.