Text

A text box to display plain text, Github Flavored Markdown, or HTML content. It supports most presentation attributes, such as images, links, and text formatting.

Use Custom or IFrame components for full HTML support.

Properties

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.

NameTypeDescriptionvaluestring

The current value.

disableMarkdownboolean

Whether to disable Markdown rendering and display plain text.

heightType'auto' | 'fixed' | 'fill'

Whether the height automatically resizes to fit content or is a fixed size.

hiddenboolean

Whether the component is visible.

horizontalAlign'left' | 'center' | 'right'

The horizontal alignment of the contents.

imageWidth'fit' | 'fill'

Whether images are cropped to fit or scaled to fill the width of the component.

maintainSpaceWhenHiddenboolean

Whether the component takes up space on the canvas if hidden is true.

marginstring

The amount of margin to render outside of the component.

overflowType'scroll' | 'hidden'

The overflow behavior when the contents exceeds the height of the component. Either scroll to display a scrollbar or hidden to clip the contents.

showInEditorboolean

Whether the component remains visible in the editor if hidden is true.

tooltipTextstring

The text to display in a tooltip on hover or focus.

verticalAlign'top' | 'center' | 'bottom'

The vertical alignment of the contents.

Methods

Methods for interacting with Text. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionsetValue(value: boolean | string | number | void)

Set the current value.

clearValue()

Clear the current value.

scrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

resetValue()

Reset value to the default value.

Related components