Classic apps component reference
Reference documentation for UI components.
You're viewing documentation for classic apps, which use Retool's original app editor. The new app builder is the recommended way to build apps and where Retool focuses new development.
Legacy
Alert
A message box to display important information with optional title and clickable action.
Button Group
A group of buttons to trigger actions when clicked.
Cascader
An input field to select options using a dropdown menu or manually enter a value in a multi-level tree structure.
Chart
A content area to display charts.
Legacy Checkbox Tree
A group of checkboxes to toggle boolean values in a multi-level tree.
Custom Component
A custom-built React, or HTML and JavaScript, component.
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.
Buttons
Button Group
A group of buttons to trigger actions when clicked.
Button
A button 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 List
A group of links to trigger actions when clicked.
Link
A link 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.
Charts
Bar Chart
A content area to display bar charts.
Bubble Chart
A content area to display bubble charts.
Funnel Chart
A content area to display funnel charts.
Heat Map
A content area to display heat maps.
Line Chart
A content area to display line charts.
Mixed Chart
A content area to display mixed charts.
Pie Chart
A content area to display pie charts.
Plotly JSON Chart
A content area to display custom charts.
Sankey Chart
A content area to display sankey charts.
Scatter Chart
A content area to display scatter charts.
Sparkline
A content area to display sparklines.
Stacked Bar Chart
A content area to display stacked bar charts.
Sunburst Chart
A content area to display sunburst charts.
Treemap
A content area to display treemaps.
Waterfall Chart
A content area to display waterfall charts.
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.
Link Card
A container preconfigured with an icon and text.
Stack
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.
Data
Filter
An interface to define filters for Table components.
JSON Explorer
A content area to display JSON data with collapsible nodes.
Key Value
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 Range
An input field to select or enter a date range.
Date Time
An input field to select or enter a date and time.
Date
An input field to select or enter a date.
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.
Integrations
AuthLogin
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.
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 Group
A group of avatars to display information and profile images for users.
Avatar
A content area to display user information and profile image.
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 Text
A content area to display an icon with accompanying text.
Icon
A content area to display an icon.
Image Grid
A content area to display images in a grid layout.
Image
A content area to display an image.
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.
Timeline
Display a Gantt chart of events.
NEW
Video
A content area to display a video.
Repeatables
Container List View
A flexible list of repeated components with containers.
Grid View
A repeatable grid of components with values that map to a list of data.
List View
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 Group
A group of checkboxes to toggle boolean values.
Checkbox Tree
A group of checkboxes to toggle boolean values in a multi-level tree.
Checkbox
An input field to toggle a boolean value.
Listbox
An input field to select an option from a list.
Multiselect Listbox
An input field to select multiple options from a list.
Multiselect
An input field to select multiple options using a dropdown menu or manually enter values.
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 Group
A group of switches to toggle boolean values.
Switch
An input field to toggle a boolean value.
Special inputs
Agent Chat
A component to chat with a Retool Agent in a classic app.
BETA
Annotated Text
An interface to display and annotate text.
Bounding Box
An interface to display a bounding box and tag areas of an image.
Color Input
An input field to select a color.
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.
LLM Chat
An interface for AI chat conversations.
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 Area
A click-to-edit input field to enter multiple lines of text.
Editable Text
A click-to-edit input field to enter a single line of text.
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.