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