diff --git a/content/docs/list-components/MultiDropdownList.md b/content/docs/list-components/MultiDropdownList.md
index 95fa569d5..4e2a7285f 100644
--- a/content/docs/list-components/MultiDropdownList.md
+++ b/content/docs/list-components/MultiDropdownList.md
@@ -200,6 +200,15 @@ Or you can also use render function as children
```js
renderNoResults={() =>
No Results Found!
}
```
+- **renderLabel** `Function` [optional]
+ can be used to change the label of the dropdown. Useful for adding highlighting/styling to or translating the label.
+ ```js
+ renderLabel={(items) => Object.values(items).map((item) => (
+
+
+
+ ))}
+ ```
- **onChange** `function` [optional]
is a callback function which accepts component's current **value** as a parameter. It is called when you are using the `value` prop and the component's value changes. This prop is used to implement the [controlled component](https://reactjs.org/docs/forms.html#controlled-components) behavior.
- **onError** `Function` [optional]
diff --git a/content/docs/list-components/SingleDropdownList.md b/content/docs/list-components/SingleDropdownList.md
index 552ed7c0a..36fa3116f 100644
--- a/content/docs/list-components/SingleDropdownList.md
+++ b/content/docs/list-components/SingleDropdownList.md
@@ -194,6 +194,15 @@ Or you can also use render function as children
```js
renderNoResults={() => No Results Found!
}
```
+- **renderLabel** `Function` [optional]
+ can be used to change the label of the dropdown. Useful for adding highlighting/styling to or translating the label.
+ ```js
+ renderLabel={(item) => (
+
+
+
+ )}
+ ```
- **onChange** `function` [optional]
is a callback function which accepts component's current **value** as a parameter. It is called when you are using the `value` prop and the component's value changes. This prop is used to implement the [controlled component](https://reactjs.org/docs/forms.html#controlled-components) behavior.
- **onError** `Function` [optional]
diff --git a/content/docs/range-components/MultiDropdownRange.md b/content/docs/range-components/MultiDropdownRange.md
index 42898e9f6..75c52654c 100644
--- a/content/docs/range-components/MultiDropdownRange.md
+++ b/content/docs/range-components/MultiDropdownRange.md
@@ -91,6 +91,15 @@ Example uses:
An optional label to display for the component in the global selected filters view. This is only applicable if `showFilter` is enabled. Default value used here is `componentId`.
- **URLParams** `Boolean` [optional]
enable creating a URL query string parameter based on the selected value of the list. This is useful for sharing URLs with the component state. Defaults to `false`.
+- **renderLabel** `Function` [optional]
+ can be used to change the label of the dropdown. Useful for adding highlighting/styling to or translating the label.
+ ```js
+ renderLabel={(items) => Object.values(items).map((item) => (
+
+
+
+ ))}
+ ```
## Demo
diff --git a/content/docs/range-components/SingleDropdownRange.md b/content/docs/range-components/SingleDropdownRange.md
index f563cdae2..0e6967b7a 100644
--- a/content/docs/range-components/SingleDropdownRange.md
+++ b/content/docs/range-components/SingleDropdownRange.md
@@ -91,6 +91,15 @@ Example uses:
An optional label to display for the component in the global selected filters view. This is only applicable if `showFilter` is enabled. Default value used here is `componentId`.
- **URLParams** `Boolean` [optional]
enable creating a URL query string parameter based on the selected value of the list. This is useful for sharing URLs with the component state. Defaults to `false`.
+- **renderLabel** `Function` [optional]
+ can be used to change the label of the dropdown. Useful for adding highlighting/styling to or translating the label.
+ ```js
+ renderLabel={(item) => (
+
+
+
+ )}
+ ```
## Demo