Classic apps component reference
Reference documentation for UI components.
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.