UI display components
View examples of picklist, text, and number fields as they appear to end users in the ServiceNow CPQ UI.
Picklist fields
|
Name |
Options |
Appearance |
Notes |
|---|---|---|---|
|
RadioButtons |
|
[Omitted image "cpq_display-components-radio-buttons.png"] Alt text: Radio buttons in horizontal direction |
Single-select |
|
VerticalRadio |
|
[Omitted image "cpq_display-components-vertical-radio.png"] Alt text: Radio buttons in vertical direction |
Single-select |
|
Radio |
|
[Omitted image "cpq_display-components-radio.png"] Alt text: Options |
Single-select |
|
Checkbox |
|
[Omitted image "cpq_display-components-checkbox.png"] Alt text: Check boxes in horizontal direction |
Multi-select |
|
VerticalCheckbox |
|
[Omitted image "cpq_display-components-vertical-checkbox.png"] Alt text: Check boxes in vertical direction |
Multi-select |
|
Picklist |
|
[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 |
Single-select; includes combo box for filtering |
|
BasicPicklist |
|
[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 |
Single-select; selection only; no combo box for filtering |
|
MultiSelectPicklist |
|
[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 |
Multi-select; includes combo box for filtering |
|
VisualPicker |
|
[Omitted image "cpq_display-components-visual-picker.png"] Alt text: Visual picker options |
Single-select using images |
|
MultiSelectVisualPicker |
|
[Omitted image "cpq_display-components-multiselect-visual-picker.png"] Alt text: Visual pickers to select multiple options |
Multi-select using images |
|
ExtendedPicklist |
|
[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 |
Single-select using images; picklist extension; includes combo box for filtering |
|
MultiSelectExtendedPicklist |
|
[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 |
Multi-select using images; picklist extension; includes combo box for filtering |
|
ExtendedPicklistDisplayOnly |
|
[Omitted image "cpq_display-components-extended-picklist-display-only.png"] Alt text: ExtendedPicklistDisplayOnly |
Single-select using images; picklist extension; includes combo box for filtering |
|
MultiSelectExtendedPicklistDisplayOnly |
|
[Omitted image "cpq_display-components-multiselect-extended-picklist-display-only.png"] Alt text: MultiSelectExtendedPicklistDisplayOnly |
Multi-select using images; picklist extension; includes combo box for filtering |
|
SingleSelectPicklistGrid |
Price display (currency code or symbol) follows layout settings |
[Omitted image "cpq_display-components-single-select-picklist-grid.png"] Alt text: SingleSelectPicklistGrid |
Single-select using images; picklist extension |
|
MultiSelectPicklistGrid |
Price display (currency code or symbol) follows layout settings |
[Omitted image "cpq_display-components-multiselect-picklist-grid.png"] Alt text: MultiSelectPicklistGrid |
Multi-select using images; picklist extension |
|
SingleSelectProductPickerGrid |
Automatically creates product rules Price display (currency code or symbol) follows layout settings User can edit custom subfields - includes quantity by default Bulk actions:
|
[Omitted image "cpq_display-components-single-select-product-picker-grid.png"] Alt text: SingleSelectProductPickerGrid |
Single-select using images; product picker |
|
MultiSelectProductPickerGrid |
Automatically creates product rules Price display (currency code or symbol) follows layout settings User can edit custom subfields - includes quantity by default Bulk actions:
|
[Omitted image "cpq_display-components-multiselect-product-picker-grid.png"] Alt text: MultiSelectProductPickerGrid |
Multi-select using images; product picker |
|
VisualProductPicker |
|
[Omitted image "cpq_display-components-visual-product-picker.png"] Alt text: VisualProductPicker |
Single-select using images; product picker |
|
MultiSelectVisualProductPicker |
|
[Omitted image "cpq_display-components-multiselect-visual-product-picker.png"] Alt text: MultiSelectVisualProductPicker |
Multi-select using images; product picker |
| 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
|
Name |
Options |
Appearance |
Notes |
|---|---|---|---|
|
Number |
Minimum and maximum values; step size Layout value example: |
[Omitted image "cpq_display-components-number.png"] Alt text: NUmber field |
|
|
Slider |
Minimum and maximum values; step size Layout value example: |
[Omitted image "cpq_display-components-slider.png"] Alt text: Slider |
|
|
NumberWithSubmit |
Button label |
[Omitted image "cpq_display-components-number-with-submit.png"] Alt text: Number with Submit |
|
| Name | Options | Appearance | Notes |
|---|---|---|---|
| Boolean | Labels for true and false states | [Omitted image "cpq_display-components-boolean.png"] Alt text: Boolean field |
Parent Topic:ServiceNow CPQ reference
---
title: UI display components
description: View examples of picklist, text, and number fields as they appear to end users in the ServiceNow CPQ UI.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/order-management/cpq-ui-display-components.html
release: brazil
topic_type: reference
last_updated: "2026-03-16"
reading_time_minutes: 2
breadcrumb: [ServiceNow 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 ServiceNow 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:**[ServiceNow CPQ reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown)
| title | UI display components |
| description | View examples of picklist, text, and number fields as they appear to end users in the ServiceNow CPQ UI. |
| locale | en-US |
| canonical_url | https://www.servicenow.com/docs/r/order-management/cpq-ui-display-components.html |
| release | brazil |
| topic_type | reference |
| last_updated | 2026-03-16 |
| reading_time_minutes | 2 |
| breadcrumb | ServiceNow CPQConfigurepricequoteReferenceSales Customer Relationship Management |