Retool Mobile component library

Reference documentation for available components in Retool Mobile.

🎉

beta

Retool Mobile is currently in private beta. Sign up to join the waitlist →

Retool Mobile provides you with a library of mobile-specific components that work natively on iOS and Android.

📘

Retool Mobile's components function in the same way as our web component library. You can only build mobile apps with mobile components and web apps with web components.

Collections

Present items in a card, list, or custom layout.

Card Collection

A list of options presented in a card layout to select an individual value. Options are dynamically mapped from a query, transformer, or any other data source.

Card Collection supports server-side pagination to make working with larger datasets more efficient.

Card Collection with horizontal scroll, half-size, and full-sizeCard Collection with horizontal scroll, half-size, and full-size

Properties for Card Collection

Available properties for Card Collection with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
data{ [key: string]: unknown }[]Source field for generating options.
bodyByIndexstring[]An array of body values for each option, by index.
cardSize'full' │ 'half'Whether the card layout is full-width or half-width.
cardStyle'flat' │ 'elevated'Whether the card style is flat or elevated.
cardType'compact' │ 'card'Whether options are displayed in a list (compact) or card layout.
hiddenbooleanIf true, the component is hidden.
itemMode'dynamic'How options are configured. Supports only dynamic mode with mappers to define each option and its properties.
prefixIconByIndexstring[]A list of prefix icons for each option, by index.
prefixImageSizeByIndexstring[]A list of image aspect ratios for each option, by index.
prefixImageSourceByIndexstring[]A list of image source URLs for each option, by index.
prefixTypeByIndexstring[]A list of the media types for each option, by index.
scrollDirection'horizontal' │ 'vertical'The scroll direction of the collection.
selectedItemstring[]The currently selected item.
selectedPageIndexnumberThe current page index.
serverPaginatedbooleanIf true, data is retrieved using server side pagination. Use selectedPageIndex to set the offset or page in your query.
showSeparatorbooleanIf true, show a separator between list options. Only available when cardStyle is flat.
subtitleByIndexstring[]A list of subtitle values for each option, by index.
subtitleLengthByIndexstring[]A list of subtitle value lengths for each option, by index.
suffixIconByIndexstring[]A list of suffix icons for each option, by index.
suffixTextByIndexstring[]A list of suffix text values for each option, by index.
suffixTypeByIndexstring[]A list of suffix types for each option, by index.
suffixValueByIndexstring[]A list of suffix values for each option, by index.
titleByIndexstring[]A list of title values for each option, by index.

List Collection

A list of options presented in a list layout to select an individual value. Options are dynamically mapped from a query, transformer, or any other data source.

Card Collection supports server-side pagination to make working with larger datasets more efficient.

List CollectionList Collection

Properties for List Collection

Available properties for List Collection with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
data{ [key: string]: unknown }[]Source field for generating options.
bodyByIndexstring[]An array of body values for each option, by index.
cardSize'full' │ 'half'Whether the card layout is full-width or half-width.
cardStyle'flat' │ 'elevated'Whether the card style is flat or elevated.
cardType'compact' │ 'card'Whether options are displayed in a list (compact) or card layout.
hiddenbooleanIf true, the component is hidden.
itemMode'dynamic'How options are configured. Supports only dynamic mode with mappers to define each option and its properties.
prefixIconByIndexstring[]A list of prefix icons for each option, by index.
prefixImageSizeByIndexstring[]A list of image aspect ratios for each option, by index.
prefixImageSourceByIndexstring[]A list of image source URLs for each option, by index.
prefixTypeByIndexstring[]A list of the media types for each option, by index.
scrollDirection'horizontal' │ 'vertical'The scroll direction of the collection.
selectedItemstring[]The currently selected item.
selectedPageIndexnumberThe current page index.
serverPaginatedbooleanIf true, data is retrieved using server side pagination. Use selectedPageIndex to set the offset or page in your query.
showSeparatorbooleanIf true, show a separator between list options. Only available when cardStyle is flat.
subtitleByIndexstring[]A list of subtitle values for each option, by index.
subtitleLengthByIndexstring[]A list of subtitle value lengths for each option, by index.
suffixIconByIndexstring[]A list of suffix icons for each option, by index.
suffixTextByIndexstring[]A list of suffix text values for each option, by index.
suffixTypeByIndexstring[]A list of suffix types for each option, by index.
suffixValueByIndexstring[]A list of suffix values for each option, by index.
titleByIndexstring[]A list of title values for each option, by index.

Custom Collection

A customized list of options to select an individual value. It renders each item from an array of data using a custom-built row of components.

Custom CollectionCustom Collection

Properties for Custom Collection

Available properties for Custom Collection with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
data{ [key: string]: unknown }[]Source field for generating options.
cardStyle'flat' │ 'elevated'Whether the card style is flat or elevated.
gap'0' │ '4' │ '8' │ 12' │ '16' │ '24' │ 32' │ '48' │ '64' │ '128' │ '256'The gap between nested components.
hiddenbooleanIf true, the component is hidden.
instancesnumberThe number of generated options.
paddingstring[]The horizontal and vertical padding applied to the component.
selectedItemstring[]The currently selected item.
showSeparatorbooleanIf true, show a separator between list options. Only available when cardStyle is flat.

Text

Display headings and plain text.

Heading

A text box to display plain text as a heading.

HeadingHeading

Properties for Heading

Available properties for Heading with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
valuestringThe text to be rendered.
hiddenbooleanIf true, the component is hidden.
size'h1' │ 'h2' │ 'h3' │ 'h4'The size of the rendered text.
textAlign'left' │ 'center' │ 'right'The horizontal alignment of the text.
width'full' │ 'fixed'Whether the component's width is full or fixed.

Text

A text box to display plain text.

TextText

Properties for Text

Available properties for Text with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
valuestringThe text to be rendered.
hiddenbooleanIf true, the component is hidden.
size'small' │ 'medium' │ 'large'The size of the rendered text.
textAlign'left' │ 'center' │ 'right'The horizontal alignment of the text.
weight'normal' │ 'bold'The font weight of the text.
width'full' │ 'fixed'Whether the component's width is full or fixed.

Forms

Collect information from users.

Checkbox

A group of checkboxes to toggle boolean values.

CheckboxCheckbox

Properties for Checkbox

Available properties for Checkbox with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
value(string │ number │ boolean │ null │ undefined)[]The currently selected values.
customValidationstringCreate any validation logic. If it evaluates to a string, that will be the error message. An empty or nullish value is treated as success.
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
formDataKeystringIf inside a Form, this key is used to pull the default value from form.initialData and construct the form.data property.
hiddenbooleanIf true, the component is hidden.
hideValidationMessagebooleanIf true, no message will be displayed when the value is invalid.
invalidbooleanWhether the current value has failed any validation rules.
labelstringA text label for the input.
labelCaptionstringAdditional text to display below the label.
labelsstring[]An optional array of labels for each value. The value will be displayed when a label is not provided.
requiredbooleanIf true, a value must be provided to be valid.
validationMessagestringThe message to be rendered when the input is invalid.
values(string │ number │ boolean │ null │ undefined)[]An array of possible values.

Date Picker

A combination select and input field to select a date from a popup or directly enter it as a text value.

Date PickerDate Picker

Properties for Date Picker

Available properties for Date Picker with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
valuestringThe currently selected date.
customValidationstringCreate any validation logic. If it evaluates to a string, that will be the error message. An empty or nullish value is treated as success.
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
formDataKeystringIf inside a Form, this key is used to pull the default value from form.initialData and construct the form.data property.
hideLabelbooleanWhether to hide the label.
hiddenbooleanIf true, the component is hidden.
hideValidationMessagebooleanIf true, no message will be displayed when the value is invalid.
invalidbooleanWhether the current value has failed any validation rules.
labelstringA text label for the input.
labelCaptionstringAdditional text to display below the label.
mode
placeholderstringText to display when no date is set.
requiredbooleanIf true, a value must be provided to be valid.
validationMessagestringThe message to be rendered when the input is invalid.

Number Input

An input field to enter a number value. It supports prefix and suffix icons.

Number InputNumber Input

Properties for Number Input

Available properties for Number Input with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
valuenumber │ nullThe current value of the input.
customValidationstringCreate any validation logic. If it evaluates to a string, that will be the error message. An empty or nullish value is treated as success.
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
formDataKeystringIf inside a Form, this key is used to pull the default value from form.initialData and construct the form.data property.
hiddenbooleanIf true, the component is hidden.
hideValidationMessagebooleanIf true, no message will be displayed when the value is invalid
iconAfterIconKeyThe key of an icon to display after the primary content.
iconBeforeIconKeyThe key of an icon to display before the primary content.
invalidbooleanWhether the current value has failed any validation rules.
labelstringA text label for the input.
labelCaptionstringAdditional text to display below the label.
maxLengthnumber │ nullThe maximum value length allowed.
minLengthnumber │ nullThe minimum value length allowed.
placeholderstringText to display when no value is set.
requiredbooleanIf true, a value must be provided to be valid.
validationMessagestringThe message to be rendered when the input is invalid.

Select

A dropdown option field to select a value. If there are more than ten values, Select uses a full-screen list box that contains a search filter.

SelectSelect

Properties for Select

Available properties for Select with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
value(string │ number │ boolean │ null │ undefined)The currently selected value.
customValidationstringCreate any validation logic. If it evaluates to a string, that will be the error message. An empty or nullish value is treated as success.
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
formDataKeystringIf inside a Form, this key is used to pull the default value from form.initialData and construct the form.data property.
hiddenbooleanIf true, the component is hidden.
hideValidationMessagebooleanIf true, no message will be displayed when the value is invalid
invalidbooleanWhether the current value has failed any validation rules.
labelstringA text label for the input.
labelCaptionstringAdditional text to display below the label.
labelPosition'left' │ 'top'The position of the label relative to the input
labelsstring[]An optional array of labels for each value. The value will be displayed when a label is not provided.
requiredbooleanIf true, a value must be provided to be valid.
validationMessagestringThe message to be rendered when the input is invalid.
values(string │ number │ boolean │ null │ undefined)[]An array of possible values.

Text Input

An input field to enter a text value. It supports prefix and suffix icons, and automatic capitalization.

Text InputText Input

Properties for Text Input

Available properties for Text Input with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
valuenumber │ nullThe current value of the input.
labelstringA text label for the input.
autoCapitalize'none' │ 'sentences' │ 'words' │ 'characters'Controls automatic capitalization of text input when using a virtual keyboard.
customValidationstringCreate any validation logic. If it evaluates to a string, that will be the error message. An empty or nullish value is treated as success.
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
formDataKeystringIf inside a Form, this key is used to pull the default value from form.initialData and construct the form.data property.
hiddenbooleanIf true, the component is hidden.
hideValidationMessagebooleanIf true, no message will be displayed when the value is invalid
iconAfterIconKeyThe key of an icon to display after the primary content.
iconBeforeIconKeyThe key of an icon to display before the primary content.
invalidbooleanWhether the current value has failed any validation rules.
labelCaptionstringAdditional text to display below the label.
maxLengthnumber │ nullThe maximum value length allowed.
minLengthnumber │ nullThe minimum value length allowed.
patternstringA JavaScript regular expression without forward slashes around the pattern, applied as validation when patternType is regex.
patternTypenull │ 'email' │ 'url' │ 'regex'A validation pattern to be enforced.
placeholderstringText to display when no value is set.
requiredbooleanIf true, a value must be provided to be valid.
showCaracterCountbooleanIf true, a character count will be displayed below the input.
validationMessagestringThe message to be rendered when the input is invalid.

Buttons

Trigger queries or perform actions when pressed.

Button

A button to trigger queries and other actions.

ButtonButton

Properties for Button

Available properties for Button with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
hiddenbooleanIf true, the component is hidden.
iconAfterIconKeyThe key of an icon to display after the primary content.
iconBeforeIconKeyThe key of an icon to display before the primary content.
loadingbooleanIf true, the component will render a loading indicator.
size'small' │ 'large'The size of the button.
textstringThe text label of the button.
width'full' │ 'fixed'Whether the component's width is full or fixed.

Fab

A floating action button to trigger queries and other actions.

FabFab

Properties for Fab

Available properties for Fab with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
iconIconKeyThe key of an icon to display before the primary content.
textstringThe text label of the button.

Media

Display rich media or collect information using a camera.

Camera

A button to open the camera and capture images using the device's camera. It supports image quality adjustments and encodes captured images as base64 strings.

CameraCamera

Properties for Camera

Available properties for Camera with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
valuestring[]The selected files as base64 encoded strings.
acceptstring[]A list of file extensions or file-type specifiers allowed by the file input. An empty array will permit all file types.
appendNewSelectionbooleanWhen true, new file selections will be appended to the current file list instead of replacing it.
buttonSize'small' │ 'large'The size of the button.
buttonTextStringThe text label of the button
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
files{ lastModified: number; name: string; size: number; type: string; }[]Metadata from the selected files. Includes name, type, size, and when they were last modified.
formDataKeystringIf inside a Form, this key is used to pull the default value from form.initialData and construct the form.data property.
hiddenbooleanIf true, the component is hidden.
hideValidationMessagebooleanIf true, no message will be displayed when the value is invalid.
iconAfterIconKeyThe key of an icon to display after the primary content.
iconBeforeIconKeyThe key of an icon to display before the primary content.
invalidbooleanWhether the current value has failed any validation rules.
maintainSpaceWhenHiddenbooleanIf true, the component will continue to take up space on the canvas when hidden.
maxCountnumber │ nullThe maximum number of items allowed.
maxSizestringThe maximum size allowed.
minCountnumber │ nullThe minumum number of items allowed.
minSizestringThe minimum size allowed.
openedbooleanWhether the camera is currently open.
parsedValuebooleanWhether the input is currently reading or parsing the selected files.
parseFilesbooleanIf parseFiles is true, data parsed from the selected files, each as an object, array, or string. Supports Excel, JSON, CSV, TSV, and text files. Other formats will return null.
parsingbooleanWhether the input is currently reading or parsing the selected files.
qualitynumberCompression quality, from 0 to 1.0. 0 corresponds to maximum compression, 1.0 for maximum quality.
requiredbooleanIf true, a value must be provided to be valid.
selectionType'single' │ 'multiple' │ 'directory'The type of selection to allow.
showInEditorbooleanIf true, the component will always be visible in edit mode, even when hidden evalues to true
tooltipTextstringText to display in a tooltip on hover or focus.
validationMessagestringThe message to be rendered when the input is invalid.
width'full' │ 'fixed'Whether the component's width is full or fixed.

Image

An image sourced from a URL or Base64-encoded file.

ImageImage

Properties for Image

Available properties for Image with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
cornerType'square' │ 'round' │ 'circle'The corner style of the image.
mode'cover' │ 'contain' │ 'stretch' │ 'center'The fill mode of the image.
ratio'2' │ '1.33' │ '1' │ '0.75'The aspect ratio (width / height) applied to the image.
srcstringThe source URL.

Scanner

A button to open the camera and capture barcodes using the device's camera. It supports skipping and confirmations for continuous scanning.

ScannerScanner

Properties for Scanner

Available properties for Scanner with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
datastring[]Data scanned by the barcode. Resets each time you close and reopen the scanner.
autoclosebooleanWhether to close the scanner after a single scan or continue scanning barcodes until manually closed.
buttonSize'small' │ 'large'The size of the button.
buttonTextStringThe text label of the button.
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
hiddenbooleanIf true, the component is hidden.
iconAfterIconKeyThe key of an icon to display after the primary content.
iconBeforeIconKeyThe key of an icon to display before the primary content.
openedbooleanWhether the camera is currently open.
width'full' │ 'fixed'Whether the component's width is full or fixed.

Supported barcode formats for Scanner

Mobile Scanner supports a range of barcode formats on iOS and Android.

FormatiOSAndroid
aztec✔︎✔︎
codabar✔︎✔︎
code39✔︎✔︎
code93✔︎✔︎
code128✔︎✔︎
code39mod43✔︎
datamatrix✔︎✔︎
ean13✔︎✔︎
ean8✔︎✔︎
interleaved2of5✔︎
itf14✔︎✔︎
maxicode✔︎
pdf417✔︎✔︎
rss14✔︎
rssexpanded✔︎
upc_a✔︎
upc_e✔︎✔︎
upc_ean✔︎
qr✔︎✔︎

WebView

A button to open a web page in a web view.

WebViewWebView

Properties for WebView

Available properties for WebView with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
buttonSize'small' │ 'large'The size of the button.
buttonTextStringThe text label of the button
disabledbooleanIf true, the input will be greyed out and non-interactive, and the value cannot be modified.
iconAfterIconKeyThe key of an icon to display after the primary content.
iconBeforeIconKeyThe key of an icon to display before the primary content.
urlstringThe source URL.
width'full' │ 'fixed'Whether the component's width is full or fixed.

Layout

Control the layout of components.

Container

A container to group other mobile components together. It supports a row layout to display nested mobile components horizontally.

ContainerContainer

Properties for Container

Available properties for Container with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

SettingTypeDescription
align'flex-start' │ 'center' │ 'flex-end'The vertical alignment of nested components when layout is set to row.
gap'0' │ '4' │ '8' │ 12' │ '16' │ '24' │ 32' │ '48' │ '64' │ '128' │ '256'The gap between nested components.
hiddenbooleanIf true, the component is hidden.
justify'flex-start' │ 'center' │ 'flex-end' │ 'space-between'The justified alignment of nested components with fixed widths.
layout'row' │ 'column'The layout of nested components, either row (horizontally) or column (vertically).
paddingstring[]The horizontal and vertical padding applied to the component.
width'full' │ 'fixed'Whether the component's width is full or fixed.

Divider

A dividing line to separate content.

DividerDivider

Spacer

An empty area to add space between components.

SpacerSpacer


Did this page help you?