Learn about Retool's library of UI components.
Retool 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.
Text inputs
-
Editable TextDisplay click-to-edit text. -
Editable Text AreaDisplay click-to-edit multiline text. -
EmailEnter an email and validate its format. -
PasswordEnter a password that is hidden or shown. -
Rich Text EditorEdit text using rich formatting. -
Text AreaEnter multiple lines of text. -
Text InputEnter a single line of text. -
URLEnter a URL and validate its format.
Number inputs
-
CurrencyEnter an amount in a specified currency. -
Editable NumberDisplay a click-to-edit number. -
Number InputEnter a number. -
PercentEnter a number as a percentage. -
Range SliderSelect start, end, and increment values. -
RatingSelect a start, heart, or smiley rating. -
SliderSelect a single value in a range.
Select inputs
-
Button GroupTrigger queries or actions. -
CascaderSelect values from a multi-level tree. -
CheckboxToggle a boolean value. -
Checkbox GroupToggle a set of boolean values. -
Checkbox TreeSelect values from a multi-level tree. -
ListboxSelect a value from a list. -
MultiselectSelect multiple values from a list. -
Multiselect ListboxSelect multiple values from a list. -
Radio GroupSelect a value from a set of options. -
Segmented ControlSelect a value from a set of options. -
SelectSelect a value from a list. -
SwitchToggle a boolean value. -
Switch GroupToggle a set of boolean values.
Buttons
-
ButtonTrigger queries or actions. -
Dropdown ButtonTrigger queries or actions from a dropdown menu. -
LinkTrigger queries or actions. -
Link ListTrigger queries or actions from a list. -
Split ButtonTrigger queries or actions. -
Toggle ButtonToggle a boolean value. -
Toggle LinkToggle a boolean value. -
Outline ButtonTrigger queries or actions.
Date and time inputs
Special inputs
-
Annotated TextSelect and tag text. -
Bounding BoxSelect and tag areas of an image. -
CommentShare comments with other users. -
JSON EditorEdit and validate JSON. -
Feature FlagsA list of toggles with metadata. -
File ButtonBrowse and select files to upload. -
File DropzoneDrag and drop files for upload. -
File InputBrowse and select files to upload. -
MicrophoneRecord and play back audio. -
Query BuilderCreate rules to filter data. -
ScannerScan barcodes and QR codes. -
Signature PadCapture a signature as an image. -
TimerRecord elapsed time.
Data
Presentation
-
AlertDisplay an alert with severity level. -
AvatarDisplay a user photo. -
Avatar GroupDisplay multiple user photos. -
CalendarDisplay a calendar to create events. -
Circular ImageDisplay an image with a circle crop. -
DividerDisplay a dividing line. -
IconDisplay an icon. -
ImageDisplay an image. -
PDFEmbed a PDF. -
Progress BarDisplay a percentage as a progress bar. -
Progress CircleDisplay a percentage as a progress circle. -
SpacerAdd blank space. -
StatisticDisplay numeric stats and trends. -
TagsDisplay a collection of tags. -
TextDisplay plain text, Markdown, or HTML. -
TimelineDisplay a timeline of events. -
VideoEmbed a video.
Containers and forms
-
Collapsible ContainerGroup components in a card that can collapse. -
ContainerGroup components in a container. -
JSON Schema FormBuild a form with JSON. -
Link CardDisplay text and link to a card. -
List ViewBuild a repeating list of components. -
ModalGroup components in an overlay. -
Stepped ContainerGroup components in a multiview card with step navigation. -
Tabbed ContainerGroup components in a multiview card with tabbed navigation. -
WizardGuide users through a set of conditional steps.
