---
title: UI display components
description: View examples of picklist, text, and number fields as they appear to end users in the CPQ UI.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/order-management/cpq-ui-display-components.html
release: australia
topic_type: reference
last_updated: "2026-03-16"
reading_time_minutes: 2
breadcrumb: [CPQ, Configure, price, quote, Reference, Sales Customer Relationship Management]
---

# UI display components

View examples of picklist, text, and number fields as they appear to end users in the CPQ UI.

## Picklist fields

<table id="table_hsb_ffv_p3c"><thead><tr><th>

Name

</th><th>

Options

</th><th>

Appearance

</th><th>

Notes

</th></tr></thead><tbody><tr><td>

**RadioButtons**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-radio-buttons.png"\] Alt text: Radio buttons in horizontal direction

</td><td>

Single-select

</td></tr><tr><td>

**VerticalRadio**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-vertical-radio.png"\] Alt text: Radio buttons in vertical direction

</td><td>

Single-select

</td></tr><tr><td>

**Radio**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-radio.png"\] Alt text: Options

</td><td>

Single-select

</td></tr><tr><td>

**Checkbox**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-checkbox.png"\] Alt text: Check boxes in horizontal direction

</td><td>

Multi-select

</td></tr><tr><td>

**VerticalCheckbox**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-vertical-checkbox.png"\] Alt text: Check boxes in vertical direction

</td><td>

Multi-select

</td></tr><tr><td>

**Picklist**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-picklist.png"\] Alt text: Picklist with multiple options\[Omitted image "cpq\_display-components-picklist-2.png"\] Alt text: Picklist with a single option

</td><td>

Single-select; includes combo box for filtering

</td></tr><tr><td>

**BasicPicklist**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-basic-picklist.png"\] Alt text: Basic picklist\[Omitted image "cpq\_display-components-basic-picklist-2.png"\] Alt text: Basic picklist with a single option

</td><td>

Single-select; selection only; no combo box for filtering

</td></tr><tr><td>

**MultiSelectPicklist**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-multiselect-picklist.png"\] Alt text: Multi select picklist\[Omitted image "cpq\_display-components-multiselect-picklist-2.png"\] Alt text: Multiple options\[Omitted image "cpq\_display-components-multiselect-picklist-3.png"\] Alt text: Multiselect - picklist

</td><td>

Multi-select; includes combo box for filtering

</td></tr><tr><td>

**VisualPicker**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-visual-picker.png"\] Alt text: Visual picker options

</td><td>

Single-select using images

</td></tr><tr><td>

**MultiSelectVisualPicker**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-multiselect-visual-picker.png"\] Alt text: Visual pickers to select multiple options

</td><td>

Multi-select using images

</td></tr><tr><td>

**ExtendedPicklist**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-extended-picklist-1.png"\] Alt text: Extended picklist\[Omitted image "cpq\_display-components-extended-picklist-2.png"\] Alt text: ERP application image

</td><td>

Single-select using images; picklist extension; includes combo box for filtering

</td></tr><tr><td>

**MultiSelectExtendedPicklist**

</td><td>

 

</td><td>

\[Omitted image "cpq\_display-components-multiselect-extended-picklist-1.png"\] Alt text: MultiSelectExtendedPicklistappearing as a list\[Omitted image "cpq\_display-components-multiselect-extended-picklist-2.png"\] Alt text: MultiSelectExtendedPicklist appearing as different options

</td><td>

Multi-select using images; picklist extension; includes combo box for filtering

</td></tr><tr><td>

**ExtendedPicklistDisplayOnly**

</td><td>

-   Hide field label
-   Hide option label
-   Center content
-   Arrange horizontally or vertically
-   Control image size

</td><td>

\[Omitted image "cpq\_display-components-extended-picklist-display-only.png"\] Alt text: ExtendedPicklistDisplayOnly

</td><td>

Single-select using images; picklist extension; includes combo box for filtering

</td></tr><tr><td>

**MultiSelectExtendedPicklistDisplayOnly**

</td><td>

-   Hide field label
-   Hide option label
-   Center content
-   Arrange horizontally or vertically
-   Control image size

</td><td>

\[Omitted image "cpq\_display-components-multiselect-extended-picklist-display-only.png"\] Alt text: MultiSelectExtendedPicklistDisplayOnly

</td><td>

Multi-select using images; picklist extension; includes combo box for filtering

</td></tr><tr><td>

**SingleSelectPicklistGrid**

</td><td>

-   Set column headers
-   Set column alignment
-   Control image size

 Price display \(currency code or symbol\) follows layout settings

</td><td>

\[Omitted image "cpq\_display-components-single-select-picklist-grid.png"\] Alt text: SingleSelectPicklistGrid

</td><td>

Single-select using images; picklist extension

</td></tr><tr><td>

**MultiSelectPicklistGrid**

</td><td>

-   Set column headers
-   Set column alignment
-   Control image size

 Price display \(currency code or symbol\) follows layout settings

</td><td>

\[Omitted image "cpq\_display-components-multiselect-picklist-grid.png"\] Alt text: MultiSelectPicklistGrid

</td><td>

Multi-select using images; picklist extension

</td></tr><tr><td>

**SingleSelectProductPickerGrid**

</td><td>

-   Set column headers
-   Set column alignment
-   Control image size

 Automatically creates product rules

 Price display \(currency code or symbol\) follows layout settings

 User can edit custom subfields - includes quantity by default

 Bulk actions:

 -   Set values
-   Include or exclude options
-   Specify minimum and maximum quantity

</td><td>

\[Omitted image "cpq\_display-components-single-select-product-picker-grid.png"\] Alt text: SingleSelectProductPickerGrid

</td><td>

Single-select using images; product picker

</td></tr><tr><td>

**MultiSelectProductPickerGrid**

</td><td>

-   Set column headers
-   Set column alignment
-   Control image size

 Automatically creates product rules

 Price display \(currency code or symbol\) follows layout settings

 User can edit custom subfields - includes quantity by default

 Bulk actions:

 -   Set values
-   Include or exclude options
-   Specify minimum and maximum quantity

</td><td>

\[Omitted image "cpq\_display-components-multiselect-product-picker-grid.png"\] Alt text: MultiSelectProductPickerGrid

</td><td>

Multi-select using images; product picker

</td></tr><tr><td>

**VisualProductPicker**

</td><td>

-   Wide or tall rectangle
-   Image, label, price, description, and quantity fields

</td><td>

\[Omitted image "cpq\_display-components-visual-product-picker.png"\] Alt text: VisualProductPicker

</td><td>

Single-select using images; product picker

</td></tr><tr><td>

**MultiSelectVisualProductPicker**

</td><td>

-   Wide or tall rectangle
-   Image, label, price, description, and quantity fields

</td><td>

\[Omitted image "cpq\_display-components-multiselect-visual-product-picker.png"\] Alt text: MultiSelectVisualProductPicker

</td><td>

Multi-select using images; product picker

</td></tr></tbody>
</table>## Text fields

|Name|Options|Appearance|Notes|
|----|-------|----------|-----|
|**Text**| |\[Omitted image "cpq\_display-components-text.png"\] Alt text: Text field| |
|**TextArea**| |\[Omitted image "cpq\_display-components-text-area.png"\] Alt text: TextArea| |
|**ReadOnlyText**| |\[Omitted image "cpq\_display-components-read-only-text.png"\] Alt text: ReadOnlyText|Supports markdown formatting, including links and inserting content from other fields|
|**Date**| |\[Omitted image "cpq\_display-components-date.png"\] Alt text: Calendar| |
|**FormattedNumber**| |\[Omitted image "cpq\_display-components-formatted-number.png"\] Alt text: Formatted number field|Supports units before or after number, displayed within the input|
|**LocationLookup**| |\[Omitted image "cpq\_display-components-location-lookup.png"\] Alt text: Lookup selection list|Accesses Google API and returns location data, which can be inserted into specified fields|

## Number fields

<table id="table_jc4_2fv_p3c"><thead><tr><th>

Name

</th><th>

Options

</th><th>

Appearance

</th><th>

Notes

</th></tr></thead><tbody><tr><td>

**Number**

</td><td>

Minimum and maximum values; step size

 Layout value example: `{"step":1,"min":0,"max":100}`

</td><td>

\[Omitted image "cpq\_display-components-number.png"\] Alt text: NUmber field

</td><td>

 

</td></tr><tr><td>

**Slider**

</td><td>

Minimum and maximum values; step size

 Layout value example: `{"step":1,"min":0,"max":100}`

</td><td>

\[Omitted image "cpq\_display-components-slider.png"\] Alt text: Slider

</td><td>

 

</td></tr><tr><td>

**NumberWithSubmit**

</td><td>

Button label

</td><td>

\[Omitted image "cpq\_display-components-number-with-submit.png"\] Alt text: Number with Submit

</td><td>

 

</td></tr></tbody>
</table>## Boolean fields

|Name|Options|Appearance|Notes|
|----|-------|----------|-----|
|**Boolean**|Labels for true and false states|\[Omitted image "cpq\_display-components-boolean.png"\] Alt text: Boolean field| |

**Parent Topic:**[CPQ reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown)