Lightning Web Components – Hide Specific Attributes from Lightning Web Components

You can do this today by adding your own "+ Add New" option to the end of your array of options, then in the change handler inspecting the selected value and handling the create new action you want to take.

Something like this:

get options() {
    return [
        { label: 'New', value: 'new' },
        { label: 'In Progress', value: 'inProgress' },
        { label: 'Finished', value: 'finished' },
        { label: ' + Add New', value: '_new_' }
    ];
}

handleChange(event) {
    let selectedValue = event.detail.value;
    if (selectedValue === '_new_') {
        // logic for handling new selection
    } else {
        this.value = selectedValue;
    }
}

The downside is that it won't have the "+" (utility:add) icon that you see in the platform on lookup fields.

If you want that icon today, you'll have to roll your own combobox. Luckily, Salesforce has open-sourced their base components, so you can start with their c-combobox component (which has a few dependencies that you'll also have to incorporate.

https://github.com/salesforce/base-components-recipes/tree/master/force-app/main/default/lwc/combobox

Once you have this base component and its dependencies, you could modify the generateItems method to accept and pass the iconName attribute to the items list from the list of options you give the component:

Here's lines 340-352 of combobox.js:

generateItems(options) {
    return options.map((option) => {
        const type = option.description ? 'option-card' : 'option-inline';
        return {
            type,
            text: option.label,
            subText: option.description,
            highlight: this.value === option.value,
            iconSize: 'x-small',
            value: option.value
        };
    });
}

Something like this would enable custom icon displays for items/options:

generateItems(options) {
    return options.map((option) => {
        const type = option.description ? 'option-card' : 'option-inline';
        return {
            type,
            text: option.label,
            subText: option.description,
            highlight: this.value === option.value,
            iconSize: 'x-small',
            iconName: option.iconName, //this is what would allow you to pass something like 'utility:add' as an attribute of the option
            value: option.value
        };
    });
}

PLEASE note that this is not something I've implemented or tested, there may be side-effects that need to be addressed. For instance, this would display the icon in the space designated for the checkmark when an item is selected, and I'm not sure how passing a custom icon into the item would impact that behavior.

Assuming the options are available in connected callback, you can set a default value like this:

import { LightningElement } from "lwc";

export default class Combobox extends LightningElement {

  options = [{label: 'a', value: 1}, {label: 'b', value: 2}]

  connectedCallback() {
    this.value = this.options[0].value;
  }
}