diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js
index 1281b2445..7d44ad95e 100644
--- a/packages/react-ui/src/components/molecules/Autocomplete.js
+++ b/packages/react-ui/src/components/molecules/Autocomplete.js
@@ -66,30 +66,39 @@ const Autocomplete = forwardRef(
const creatableRenderOption = (props, option) => (
- {option.inputValue && }
-
+ {option.divider ? (
+
+ ) : (
+ <>
+ {option.inputValue && }
+
+ >
+ )}
);
diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js
index a32909fc9..aed70c47b 100644
--- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js
+++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js
@@ -138,7 +138,8 @@ const top100Films = [
{
title: 'The Godfather: Part II',
year: 1974,
- startAdornment:
+ startAdornment: ,
+ dense: true
},
{
title: 'The Dark Knight',
@@ -159,7 +160,12 @@ const top100Films = [
endAdornment:
},
{ title: 'Subtitle', subtitle: true },
- { title: 'Pulp Fiction', year: 1994, startAdornment: },
+ {
+ title: 'Pulp Fiction',
+ year: 1994,
+ startAdornment: ,
+ disabled: true
+ },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
@@ -183,10 +189,12 @@ const top100Films = [
},
{ title: 'Forrest Gump', year: 1994, startAdornment: },
{ title: 'Inception', year: 2010, startAdornment: },
+ { title: 'divider', divider: true },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
- startAdornment:
+ startAdornment: ,
+ destructive: true
}
];
@@ -1070,6 +1078,7 @@ const CreatableWithPrefixAndSuffixTemplate = ({
{