Tags

A pill list to display color-coded values. It supports custom colors and deterministic assignment so each unique tag uses a different color.

Properties

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

NameTypeDescriptionvaluestring[]

A list of values to display.

allowWrapboolean

Whether content can wrap to multiple lines. If false and there are more tags than space allows, the last tag displays a count of all those not currently rendered.

colorsstring[]

An array of colors for the tags, assigned according to hashColors

hashColorsboolean

If false, tags are assigned colors in a cycle, in the order that they appear. If true, each tag is assigned the same color regardless of the order it appears in.

hiddenboolean

Whether the component is visible.

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

The horizontal alignment of the tags

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.

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.

Methods

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

NameDescriptionsetValue(value: any)

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.