You are here:
Combobox Lightning Web Component ReadMe (Managed Package)
For the managed package runtime, this page contains a Combobox LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Health and Insurance Spring '21
The Combobox Lightning Web Component is an input element in which the user can select an option from a list of options.
Available c-combobox Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
label |
string |
Adds a title for the combobox component. |
||
name |
string |
Adds a name to the combobox component. |
||
placeholder |
string |
Adds text to the input element to prompt user to select from the dropdown (list of options to render labels). For example, "Select an option". |
||
variant |
standard, label-hidden (Default: standard) |
string |
Changes the appearance of the input element. |
|
value |
string |
Adds a pre-populatd value to the combobox input. |
||
options |
array |
yes |
Sets the list of options available for selection. Each option has "label" and "value" attributes, such as |
|
required |
true, false (Default: false) |
boolean |
If the user must enter a value before submitting the form, set to true. |
|
multiple |
true, false (Default: false) |
boolean |
To enable the ability to select multiple options, set to true. |
|
searchable |
true, false (Default: false) |
boolean |
To enable user search, set to true. |
|
read-only |
true, false (Default: false) |
boolean |
To prevent the user from editing the field, set to true. |
|
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the combobox component. |
|
errormessage |
warning, success, error, info |
string |
Sets the style of the error message. |
|
disabled |
true, false (Default: false) |
boolean |
To disable the combobox, set to true. |
|
max-count |
number |
Sets the number of options to display before user must scroll. |
||
sorted |
true, false (Default: false) |
boolean |
If set to true the options are sorted in alphabetic order of value or the sortField. |
|
sortField |
string |
number |
To set the sortField used to sort the options. Works only if sorted is true |
|
deleteMultiple |
true, false (Default: false) |
boolean |
To have delete on multiple select pill |
|
isDisplayFlex |
true, false (Default: false) |
boolean |
To set display:flex style for pill wrapper div and it also set overflow:hidden and text-overflow:ellipsis style to each pill. Selected values will be displayed as pills only if the multiple attribute is true. |
|
data-show-lookup |
true, false (Default: false) |
string |
Applicable only when |
Example c-combobox Component
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
></c-combobox>
<!-- Combobox with grouping -->
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple","group":"group1"},{"label":"Orange","value":"orange","group":"group1"},{"label":"Potato","value":"Potato",,"group":"group2"}]'
label="Single Select"
placeholder="Normal Input"
></c-combobox>
<!-- Combobox with footer -->
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
>
<div slot="footer">
<span>Footer</span>
</div>
</c-combobox>Example Label Slot Usage
A named slot (name = label) is available in the event a user would like to dynamically insert markup next to the input's label.
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
>
<span slot="label">Additional markup is inserted here</span>
</c-combobox>Vlocity Insurance and Health Summer '20
The Combobox Lightning Web Component is an input element in which the user can select an option from a list of options.
Available c-combobox Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
deleteMultiple |
true, false (Default: false) |
boolean |
Enables deleting multiple pills. |
|
disabled |
true, false (Default: false) |
To disable the combobox, set to true. |
||
errormessage |
warning, success, error, info |
string |
Sets the style of the error message. |
|
isDisplayFlex |
true, false (Default: false) |
boolean |
Makes the wrapper 'div' of the pill flexible by setting the CSS 'display' property to 'flex'. Also sets 'overflow' property to 'hidden', and 'text-overflow' to 'ellipsis'. Selected values display as pills only if the multiple attribute is set to true. |
|
label |
string |
Adds a title for the combobox component. |
||
max-count |
number |
Sets the number of options to display before the user must scroll. |
||
multiple |
true, false (Default: false) |
To enable the ability to select multiple options, set to true. |
||
name |
string |
Adds a name to the combobox component. |
||
options |
array |
yes |
Sets the list of options available for selection. Each option has "label" and "value" attributes, such as |
|
placeholder |
string |
Adds text to the input element to prompt user to select from the dropdown (list of options to render labels). For example, "Select an option". |
||
read-only |
true, false (Default: false) |
To prevent the user from editing the field, set to true. |
||
required |
true, false (Default: false) |
If the user must enter a value before submitting the form, set to true. |
||
searchable |
true, false (Default: false) |
To enable user search, set to true. |
||
sortField |
string |
number |
Sets the field used to sort the options. Works only if sorted is set o true. |
|
sorted |
true, false (Default: false) |
boolean |
If set to true the options are sorted in alphabetic order of value or the sortField. |
|
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the combobox component. |
|
value |
string |
Adds a pre-populatd value to the combobox input. |
||
variant |
standard, label-hidden (Default: standard) |
string |
Changes the appearance of the input element. |
Example c-combobox Component
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
></c-combobox>
<!-- Combobox with grouping -->
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple","group":"group1"},{"label":"Orange","value":"orange","group":"group1"},{"label":"Potato","value":"Potato",,"group":"group2"}]'
label="Single Select"
placeholder="Normal Input"
></c-combobox>
<!-- Combobox with footer -->
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
>
<div slot="footer">
<span>Footer</span>
</div>
</c-combobox>Label Slot Usage
A named slot (name = label) is available in the event a user would like to dynamically insert markup next to the input's label.
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
>
<span slot="label">Additional markup is inserted here</span>
</c-combobox>Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The Combobox Lightning Web Component is an input element in which the user can select an option from a list of options.
Available c-combobox Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
disabled |
true, false (Default: false) |
To disable the combobox, set to true. |
||
errormessage |
warning, success, error, info |
string |
Sets the style of the error message. |
|
label |
string |
Adds a title for the combobox component. |
||
max-count |
number |
Sets the number of options to display before user must scroll. |
||
multiple |
true, false (Default: false) |
To enable the ability to select multiple options, set to true. |
||
name |
string |
Adds a name to the combobox component. |
||
options |
array |
yes |
Sets the list of options available for selection. Each option has "label" and "value" attributes, such as |
|
placeholder |
string |
Adds text to the input element to prompt user to select from the dropdown (list of options to render labels). For example, "Select an option". |
||
read-only |
true, false (Default: false) |
To prevent the user from editing the field, set to true. |
||
required |
true, false (Default: false) |
If the user must enter a value before submitting the form, set to true. |
||
searchable |
true, false (Default: false) |
To enable user search, set to true. |
||
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the combobox component. |
|
value |
string |
Adds a pre-populatd value to the combobox input. |
||
variant |
standard, label-hidden (Default: standard) |
string |
Changes the appearance of the input element. |
Example c-combobox Component
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
></c-combobox>
<!-- Combobox with footer -->
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
>
<div slot="footer">
<span>Footer</span>
</div>
</c-combobox>Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19
The Combobox Lightning Web Component is an input element in which the user can select an option from a list of options.
Available c-combobox Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
disabled |
true, false (Default: false) |
To disable the combobox, set to true. |
||
errormessage |
warning, success, error, info |
string |
Sets the style of the error message. |
|
label |
string |
Adds a title for the combobox component. |
||
max-count |
number |
Sets the number of options to display before user must scroll. |
||
multiple |
true, false (Default: false) |
To enable the ability to select multiple options, set to true. |
||
name |
string |
Adds a name to the combobox component. |
||
options |
array |
yes |
Sets the list of options available for selection. Each option has |
|
placeholder |
string |
Adds text to the input element to prompt user to select from the dropdown (list of options to render labels). For example, ``Select an option''. |
||
read-only |
true, false (Default: false) |
To prevent the user from editing the field, set to true. |
||
required |
true, false (Default: false) |
If the user must enter a value before submitting the form, set to true. |
||
searchable |
true, false (Default: false) |
To enable user search, set to true. |
||
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the combobox component. |
|
value |
string |
Adds a pre-populatd value to the combobox input. |
||
variant |
standard, label-hidden (Default: standard) |
string |
Changes the appearance of the input element. |
Example c-combobox Component
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
></c-combobox>
<!-- Combobox with footer -->
<c-combobox
theme="slds"
read-only="true"
options='[{"label":"Apple","value":"apple"},{"label":"Orange","value":"orange"},{"label":"Mango","value":"mango"}]'
label="Single Select"
placeholder="Normal Input"
>
<div slot="footer">
<span>Footer</span>
</div>
</c-combobox>