---
sourceDocument: Brazil Sales Customer Relationship Management
sourceDocumentLink: https://www.servicenow.com/docs/r/order-management

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil Sales Customer Relationship Management

ft:clusterId :

    - omgmt

bundleId :

    - omgmt

workflow :

    - Customer and Industry


---

# UI display components

# UI display components {#ariaid-title1}

Release version: Brazil  
Updated March 16, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read  
View examples of picklist, text, and number fields as they appear to end users in the ServiceNow CPQ UI.

## Picklist fields {#cpq-ui-display-components__section_xp4_q2v_p3c}

{#cpq-ui-display-components__table_hsb_ffv_p3c__entry__4}

| Name | Options | Appearance | Notes |
|-|-|-|-|
| RadioButtons |   | ![Radio buttons in horizontal direction]() | Single-select |
| VerticalRadio |   | ![Radio buttons in vertical direction]() | Single-select |
| Radio |   | ![Options]() | Single-select |
| Checkbox |   | ![Check boxes in horizontal direction]() | Multi-select |
| VerticalCheckbox |   | ![Check boxes in vertical direction]() | Multi-select |
| Picklist |   | ![Picklist with a single option]() | Single-select; includes combo box for filtering |
| BasicPicklist |   | ![Basic picklist with a single option]() | Single-select; selection only; no combo box for filtering |
| MultiSelectPicklist |   | ![Multi select picklist]() | Multi-select; includes combo box for filtering |
| VisualPicker |   |   | Single-select using images |
| MultiSelectVisualPicker |   |   | Multi-select using images |
| ExtendedPicklist |   |   | Single-select using images; picklist extension; includes combo box for filtering |
| MultiSelectExtendedPicklist |   |   | Multi-select using images; picklist extension; includes combo box for filtering |
| ExtendedPicklistDisplayOnly | * Hide field label * Hide option label * Center content * Arrange horizontally or vertically * Control image size {#cpq-ui-display-components__ul_kvh_fmv_p3c} |   | Single-select using images; picklist extension; includes combo box for filtering |
| MultiSelectExtendedPicklistDisplayOnly | * Hide field label * Hide option label * Center content * Arrange horizontally or vertically * Control image size {#cpq-ui-display-components__ul_tys_hmv_p3c} |   | Multi-select using images; picklist extension; includes combo box for filtering |
| SingleSelectPicklistGrid | * Set column headers * Set column alignment * Control image size {#cpq-ui-display-components__ul_b3m_hnv_p3c} Price display (currency code or symbol) follows layout settings |   | Single-select using images; picklist extension |
| MultiSelectPicklistGrid | * Set column headers * Set column alignment * Control image size {#cpq-ui-display-components__ul_zqt_knv_p3c} Price display (currency code or symbol) follows layout settings |   | Multi-select using images; picklist extension |
| SingleSelectProductPickerGrid | * Set column headers * Set column alignment * Control image size {#cpq-ui-display-components__ul_mtr_h4v_p3c} 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 {#cpq-ui-display-components__ul_ntr_h4v_p3c} |   | Single-select using images; product picker |
| MultiSelectProductPickerGrid | * Set column headers * Set column alignment * Control image size {#cpq-ui-display-components__ul_mvt_xnv_p3c} 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 {#cpq-ui-display-components__ul_ab4_f4v_p3c} |   | Multi-select using images; product picker |
| VisualProductPicker | * Wide or tall rectangle * Image, label, price, description, and quantity fields {#cpq-ui-display-components__ul_hwl_p4v_p3c} |   | Single-select using images; product picker |
| MultiSelectVisualProductPicker | * Wide or tall rectangle * Image, label, price, description, and quantity fields {#cpq-ui-display-components__ul_vcf_r4v_p3c} |   | Multi-select using images; product picker |
[Table 1. Picklist fields]

{#cpq-ui-display-components__table_hsb_ffv_p3c}

## Text fields {#cpq-ui-display-components__section_omb_r2v_p3c}

{#cpq-ui-display-components__table_mqv_2fv_p3c__entry__4}

| Name | Options | Appearance | Notes |
|-|-|-|-|
| Text |   | ![Text field]() |   |
| TextArea |   | ![TextArea]() |   |
| ReadOnlyText |   | ![ReadOnlyText]() | Supports markdown formatting, including links and inserting content from other fields |
| Date |   |   |   |
| FormattedNumber |   |   | Supports units before or after number, displayed within the input |
| LocationLookup |   |   | Accesses Google API and returns location data, which can be inserted into specified fields |
[Table 2. Text fields]

{#cpq-ui-display-components__table_mqv_2fv_p3c}

## Number fields {#cpq-ui-display-components__section_vlq_s2v_p3c}

{#cpq-ui-display-components__table_jc4_2fv_p3c__entry__4}

| Name | Options | Appearance | Notes |
|-|-|-|-|
| Number | Minimum and maximum values; step size Layout value example: `{"step":1,"min":0,"max":100}` | ![NUmber field]() |   |
| Slider | Minimum and maximum values; step size Layout value example: `{"step":1,"min":0,"max":100}` | ![Slider]() |   |
| NumberWithSubmit | Button label | ![Number with Submit]() |   |
[Table 3. Number fields]

{#cpq-ui-display-components__table_jc4_2fv_p3c}

## Boolean fields {#cpq-ui-display-components__section_fdg_t2v_p3c}

{#cpq-ui-display-components__table_vph_cfv_p3c__entry__4}

| Name | Options | Appearance | Notes |
|-|-|-|-|
| Boolean | Labels for true and false states | ![Boolean field]() |   |
[Table 4. Boolean field]

{#cpq-ui-display-components__table_vph_cfv_p3c}