Skip to main content
The Component Picker field allows you to build dynamic landing pages. Here’s how it works in a nutshell:
  1. Add a Component Picker field to a Page or Page Type.
  2. Create an allowlist of Components to be used in the field - you can choose from existing Components, or create new ones.
  3. When someone creates an instance of that Page or Page Type, they can select Components from that list.
When someone adds Components from a Picker, they can add multiple instances of each Component, and they can add Components in any order.
In the below example, someone has set up a “Page Body” Component Picker field in a Page Schema. They’ve added two Components to the allowlist: a “Left content block”, and a “Right content block”. Component Picker
If a content creator were creating an instance of this Page Type, they might select Components to create a Page body like this:
  • Right content block
  • Left content block
  • Left content block
  • Right content block

​
Field at a glance

​
Input and output

Input type

Component Picker field defined in the Page schema with your choice of field types

API output

array

​
API response

Fetching Components from the API

Learn more about how Components are returned by the API, and how to model Component content in your app.

​
Field configuration and validation options

Component fields don’t have any configuration options of their own (except for the usage of conditional fields). Instead, each field you add to a component has its own validation and configuration options.

​
Adding a Component Picker

1

Add the Component Picker Field

Click on the Component Picker option in the Page Type configuration sidebar:Component picker field optionThis will add the Component Picker to your page schema:Page schema component picker field
2

Name the Component Picker

Give the field a descriptive name. Common names include “Body”, “Sections”, or “Content Blocks”.
3

Add Components to the Picker

Click on the Add from Library button and select the components that content editors should be able to use:Component picker with componentsOr, you can define Components directly from inside the Component Picker.

​
Using the Component Picker

​
Adding Components

1

Open the Component Picker

In your Page, look for the Component Picker section. Pickers can be identified by the Component Picker button.Click on the button to add components:Select the Body component picker iconThis opens a Component Library modal of Components that have been filtered to those in the Picker’s allowlist.Select components from the Component Library
2

Choose a Component

Select from the available components, and a new component section will appear.
3

Fill in the Component Fields

Fill in the fields on the individual Components, and then Save or Publish the Page.Text ComponentText Component

​
Cloning Components

You can clone Components within a picker with the clone icon. Cloning components in picker

​
Expanding and collapsing Components

Click on the name of any Component in the Picker to expand or collapse it. You can also click on the Expand All button to expand all Components simultaneously. Expand Collapse Components
Tip: Collapse components you’re not actively editing to keep your page easier to navigate, especially for pages with many components.

​
Reordering Components

To re-order Components, you simply have to drag & drop a Component up or down your content layout. Reordering components

​
Using arrow controls

If you prefer not to drag, you can also use the arrow buttons:
  1. Locate the up/down arrows next to the component name
  2. Click the up arrow to move the component higher on the page
  3. Click the down arrow to move the component lower
  4. The page preview will reflect the new order
Arrow controls are especially useful when you need to move a component just one or two positions, or when using a trackpad where drag-and-drop can be challenging.
Pro Tip: Collapse all components before reordering. This gives you a cleaner view of your page structure and makes drag-and-drop easier, especially for pages with many components.

​
Best practices

Only include components that make sense for each Page Type. A careers page doesn’t need a product pricing component.
Document which components to use in which situations. Create a style guide for content editors.
Before adding components, plan the page layout. Consider the user journey and information hierarchy.
Always preview the page to see how components render together before publishing.
Name Component Picker fields consistently across Page Types (e.g., always “Body” or always “Sections”).

Components: overview

Component Library overview

Conditional fields in Components

The Component Picker

Components: fetching via API and adding to the application