Skip to main content
More in Learn

Choice Component

The choice component allows you to semantically group multiple components, but only allows one of those components to be used at a time. This enables polymorphic components when editing the content.

Choice Component Usage

With the choice component, you can define shapes and/or pieces that allow editorial users to, for instance, manage different types of hero media like an image, video, or relation to a richer media item. This still maintains semantic integrity with all choices being grouped as hero, but the editorial user can only select one when creating the item.

To use another example: there are different sets of properties that describe a TV vs. a refrigerator. The editorial user can click on the appropriate set of properties to define during product creation.

Choice component example
Edit choice component

Nesting with Choice Components

Choice components come with a powerful nesting capability. You can add them to pieces and other structural components like chunks to create sophisticated multi-level structures. Currently, four levels of nesting are supported. The diagram below shows the different combinations that are possible between pieces and structural components.

The components on the fourth level of nesting may only contain non-structural components. A non-structural component is any component that isn't a chunk or choice, such as single line or rich text. A full list of non-structural components can be found here.

Choice nesting diagram

The screenshots below show some examples of nested structures for product properties (food, in this case) and flexible marketing content.

Nesting example food properties
Nesting example hero
People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community