UI display components

  • Release version: Australia
  • Updated March 16, 2026
  • 2 minutes to read

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

    Picklist fields

    Table 1. Picklist fields
    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 multiple optionsPicklist with a single option Single-select; includes combo box for filtering
    BasicPicklist Basic picklistBasic picklist with a single option Single-select; selection only; no combo box for filtering
    MultiSelectPicklist Multi select picklistMultiple optionsMultiselect - picklist Multi-select; includes combo box for filtering
    VisualPicker Visual picker options Single-select using images
    MultiSelectVisualPicker Visual pickers to select multiple options Multi-select using images
    ExtendedPicklist Extended picklistERP application image Single-select using images; picklist extension; includes combo box for filtering
    MultiSelectExtendedPicklist MultiSelectExtendedPicklistappearing as a listMultiSelectExtendedPicklist appearing as different options 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
    		 ExtendedPicklistDisplayOnly 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
    		 MultiSelectExtendedPicklistDisplayOnly Multi-select using images; picklist extension; includes combo box for filtering
    SingleSelectPicklistGrid
    • Set column headers
    • Set column alignment
    • Control image size

    Price display (currency code or symbol) follows layout settings

    		 SingleSelectPicklistGrid Single-select using images; picklist extension
    MultiSelectPicklistGrid
    • Set column headers
    • Set column alignment
    • Control image size

    Price display (currency code or symbol) follows layout settings

    		 MultiSelectPicklistGrid Multi-select using images; picklist extension
    SingleSelectProductPickerGrid
    • 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
    		 SingleSelectProductPickerGrid Single-select using images; product picker
    MultiSelectProductPickerGrid
    • 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
    		 MultiSelectProductPickerGrid Multi-select using images; product picker
    VisualProductPicker
    • Wide or tall rectangle
    • Image, label, price, description, and quantity fields
    		 VisualProductPicker Single-select using images; product picker
    MultiSelectVisualProductPicker
    • Wide or tall rectangle
    • Image, label, price, description, and quantity fields
    		 MultiSelectVisualProductPicker Multi-select using images; product picker

    Text fields

    Table 2. Text fields
    Name Options Appearance Notes
    Text Text field
    TextArea TextArea
    ReadOnlyText ReadOnlyText Supports markdown formatting, including links and inserting content from other fields
    Date Calendar
    FormattedNumber Formatted number field Supports units before or after number, displayed within the input
    LocationLookup Lookup selection list Accesses Google API and returns location data, which can be inserted into specified fields

    Number fields

    Table 3. Number fields
    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

    Boolean fields

    Table 4. Boolean field
    Name Options Appearance Notes
    Boolean Labels for true and false states Boolean field