Getting started with the Key Value component
Learn how to display data in key-value pairs.
You're viewing documentation for classic apps, which use Retool's original app editor. The new app builder is the recommended way to build apps and where Retool focuses new development.
Key Value components display key-value data and are often used to display data sourced from other components. For example, it's common to configure a Key Value component to display detailed information from a selected row in a table. Try out the classic app below for an example.
Display key-value pairs
Retool seeds Key Value components with demo data when you add them to the canvas. You can also set the component's Data to any JavaScript object. This includes query results, table data, or JSON data.
Edit properties and appearance
After you pass data to the Key Value component, Retool infers properties and their formats. These properties are initially listed in the Dynamic section, and you can save properties to customize and reorder them. You can also hide properties, configure their format, change their labels, and more.
There are also several appearance settings to choose from. You can change the label position, group layout, height, etc.