Skip to content
Release: Australia · Updated: 2026-03-12 · Official documentation · View source

Field type display options

Field type display options

Users have many display options for the different field types. These are defined in the layout CSV in the Component Display Type column using the values in the parentheses for each type.

The admin uses the Component Display Type column to define how a field will display on a layout. The following types are available.

Field typeComponent display types
TextReadOnlyText Text TextArea Date LocationLookup
BooleanBoolean Radio RadioButtons Checkbox
NumberNumber NumberWithSubmit Slider ReadOnlyText ReadOnlyCurrency FormattedNumber
Picklist \(single-select\)Picklist ReadOnlyPicklist ExtendedPicklist ExtendedPicklistDisplayOnly Radio RadioButtons VerticalRadio SingleSelectPicklistGrid VisualPicker
Picklist \(multi-select\)MultiSelectPicklist MultiSelectExtendedPicklist MultiSelectExtendedPicklistDisplayOnly MultiSelectPicklistGrid MultiSelectVisualPicker Checkbox VerticalCheckbox
Product pickerProductPickerGrid VisualProductPicker

Text component display type

Text fields accept a maximum of 2000 entered characters. Administrators can specify minimum and maximum field lengths and a static default value. Text fields can have the following component display types.

Text: A single-line input. Examples demonstrate unpopulated and populated text fields because they are displayed on to the end user.

Image omitted: cpq-fields-text-examples-111.png
Single-line input

TextArea: A multi-line input field. The example shows a text area with force-set values populated.

Image omitted: cpq-fields-text-area-examples-112.png
Sample output

ReadOnlyText: A display-only option. The example shows a text area with a heading and the displayed field details.

Image omitted: cpq-fields-read-only-text-113.png
Readonly text value

Date: A single-line input and searchable calendar option. Users can enter a date or search by using the calendar icon.

Image omitted: cpq-fields-date-114.png
Date

LocationLookup: uses the Google Places API to pull address data that can be used for unique location configuration and pricing.

Image omitted: cpq-fields-location-lookup-115.png
Location lookup

Boolean component display type

Boolean fields only accept two values: True and False. False is the default state. Administrators can specify labels for each state. Unless specified, the default label for True is Enabled, and the default label for False is Disabled.

Boolean: Displays as a switch.

Image omitted: cpq-fields-boolean-122.png
Booolean component

Radio: Displays as square radio buttons.

Image omitted: cpq-fields-radio-123.png
Radio button

RadioButtons: Displays as circular radio buttons.

Image omitted: cpq-fields-radio-buttons-124.png
Radio button

Checkbox: Displays either checked or unchecked.

Image omitted: cpq-fields-checkbox-126.png
Boolean check box

Number component display type

Numbers fields accept only numeric characters. Administrator must specify whether the field will be used as a number, as currency, or as a percentage. Optional settings include minimum, maximum, and default values. The unit label setting is not used in the application.

Number: Users can enter a number using the keyboard or modify it by using the up and down buttons.

Image omitted: cpq-fields-number-116.png
Target number

NumberWithSubmit: Users enter the number by using the keyboard and must click the "Apply" button before their input is accepted.

Image omitted: cpq-fields-number-with-submit-118.png
Demo fields number

Slider: Users slide through range of available numbers. This field appears only if the field definition has a maximum value.

Image omitted: cpq-fields-number-slider-119.png
Target number

ReadOnlyText and ReadOnlyCurrency: Display-only options, similar to ReadOnlyText for text fields. ReadOnlyCurrency is a display-only option with currency formatting.

Image omitted: cpq-fields-read-only-currency-120.png
Number field test

FormattedNumber: Users can enter a number by using the keyboard or modify it by using the up and down buttons. When the field loses focus, it displays in the format defined in the layout CSV.

Image omitted: cpq-fields-formatted-number-121.png
General fields screen

Picklist component display type (single-select)

Picklists allow only specified options to be selected. Administrator must specify whether the field is single-select or multi-select, and if it is single-select, whether the values should be evaluated as a text fields or a number fields. The administrator can also add field options, set the order, specify a default value, and add picklist extension data.

Picklist:

Image omitted: cpq-fields-picklist-131.png
Picklist option

ReadOnlyPicklist: selection only: the user cannot type and filter options.

Image omitted: cpq-fields-picklist-read-only-132.png
CSV file

Radio: Displays all options in a square label display, making all options visible without the use of a menu.

Image omitted: cpq-fields-picklist-radio-130.png
Radio button

RadioButtons:

Image omitted: cpq-fields-picklist-single-select-128.png
Picklist display

VerticalRadio: Options appear as vertical radio buttons.

Image omitted: cpq-fields-picklist-vertical-radio-129.png
Picklist options

Visual Picker: Displays the fieldʼs options using an associated image with a label below the image. Currently selected options are highlighted with a checkmark.

Image omitted: cpq-fields-picklist-visual-133.png
Visual picker

Picklist component display type (multi-select)

Checkbox: Displays options in row format with checkbox selection. multi-select picklists only.

Image omitted: cpq-fields-multi-select-checkbox-134.png
Checkbox options

Vertical Checkbox: displays checkbox selection in vertical alignment. multi-select picklists only.

Image omitted: cpq-fields-multi-select-checkbox-vertical-checkbox-135.png
check box options

ReadOnlyPicklist: (same as single-select)

MultiSelectPicklist:

Image omitted: cpq-fields-multi-select-picklist-1-136.png
Picklist options
Image omitted: cpq-fields-multi-select-picklist-2-137.png
Options

Picklist extension (PLE)

ExtendedPicklist and MultiSelectExtendedPicklist: Includes additional details from the PLE and lets users choose from a menu. The example shows that this single-select extended picklist displays details from two columns from the associated PLE. Images can be added to field options.

Image omitted: cpq-fields-picklist-extension-1-138.png
Extended picklist

ExtendedPicklistDisplayOnly, MultiSelectExtendedPicklistDisplayOnly: Includes additional details from the PLE and displays the selection. Options are determined by rule and default options. Not user editable.

Image omitted: cpq-fields-picklist-extension-2-139.png
Extended picklist

SingleSelectPicklistGrid, MultiSelectPicklistGrid, andSingleSelectPicklistGridCheckbox: Includes additional details from the PLE and displays field options in a grid. The Checkbox version lets the end user deselect their option.

Image omitted: cpq-fields-picklist-extension-3-140.png
CXV file

Product picker component display type

Product pickers are similar to a picklists with extended data. Product pickers can add products to a bill of materials and map additional data to product list fields, including extended data, without writing standard rules.

ProductPickerGrid: Shows the product picker and its subfields in a grid format, much like a picklist extension.

Image omitted: cpq-fields-product-picker-grid.png
Picklistcomponent

VisualProductPicker: Shows the product picker and its subfields as a Visual Picker.

Image omitted: cpq-fields-product-picker-visual.png
Visual picker

Related topics

Configure fields