Description list

Display and organize information
The DescriptionList component enables users to organize information and is commonly used to display metadata in key-value pairs.

Basic usage

Task backed

A DescriptionList can be backed by an Airplane task rather than setting the items prop. Set the task prop to call an Airplane task. The items are automatically inferred from the output of the Task.
The task can either return items as:
  1. A list of objects, where each object has a term and description property, e.g. [{term: "Name", description: "John Doe"}].
  2. An object where the keys are the term and the values are the description, e.g. {Name: "John Doe"}.

Customizing data

To use a task that outputs a format that isn't expected by DescriptionList, use outputTransform to convert the output. This prop is a function that receives the task output and returns new items.
For example, if we want to capitalize the cat's name, we can do the following:

Component API

{ term: React.ReactNode; description: React.ReactNode; }[]
List of terms and descriptions.
"start" | "end" | "center"
Alignment of the term and description.
Renders a loading state when true.
SizingToken | "{number}px"
Defines the width of the component.
SizingToken | "{number}px"
Defines the height of the component.
If true, the element will grow to fill available space. This prop works only if the element is a direct child of a Stack.
string | AirplaneFunc | SlugQuery | FunctionQuery

The task query to execute when this component loads. The component's data will be populated by the task's output and loading and error states will be handled automatically.

If the task doesn't require any parameters or special options, you can just pass the task slug (task="my_task") or an AirplaneFunc—the return value of airplane.task() (task={myTask}).

If the task does require parameters or special options, pass the task as an object. If you are using a slug, specify the slug prop to pass the task configuration as a SlugQuery. If you are using an AirplaneFunc, specify the fn prop to pass the task configuration as a FunctionQuery.


The refetchInterval prop represents how often (in milliseconds) the task query should be rerun to refetch data automatically.

The onSuccess and onError callbacks will run on task success or failure.

The executeOnMount, executeOnWindowFocus, and executeOnReconnect params control when the task is (re)run - on component mount, when the window is (re)focused, and if the network reconnects. All of these options are true by default.

(output: TOutput) => { term: React.ReactNode; description: React.ReactNode; }[] | Record<string, React.ReactNode>
Callback to transform the task output before it populates the description list items.