diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b12d2369..50240eb05 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Autocomplete creatable: improved API to cover more use cases [#881](https://github.com/CartoDB/carto-react/pull/881)
+- Fix LegendProportion radius scale [#877](https://github.com/CartoDB/carto-react/pull/877)
 - Fix time zone handling in week counts, separate getMonday and getUTCMonday utilities [#879](https://github.com/CartoDB/carto-react/pull/879)
 
 ## 3.0.0
@@ -12,7 +14,7 @@
 
 ### 3.0.0-alpha.11 (2024-06-12)
 
-- Add creatable functionality to Autocomplete & MenuItem fixed [#828](https://github.com/CartoDB/carto-react/pull/828)
+- Add creatable functionality to Autocomplete & MenuItem fixed [#873](https://github.com/CartoDB/carto-react/pull/873)
 - Table component: Added selected row and with checkbox example in Storybook [#876](https://github.com/CartoDB/carto-react/pull/876)
 
 ### 3.0.0-alpha.10 (2024-06-03)
diff --git a/packages/react-ui/src/components/molecules/Autocomplete.d.ts b/packages/react-ui/src/components/molecules/Autocomplete.d.ts
index 2989adb7c..f58fa9f1c 100644
--- a/packages/react-ui/src/components/molecules/Autocomplete.d.ts
+++ b/packages/react-ui/src/components/molecules/Autocomplete.d.ts
@@ -10,7 +10,8 @@ export type AutocompleteProps<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']
 > = MuiAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
   creatable?: boolean;
-  newItemTitle?: React.ReactNode | string;
+  newItemLabel?: string | ((value: string) => React.ReactNode | string);
+  newItemIcon?: React.ReactNode;
 };
 
 declare const Autocomplete: <
diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js
index f1a6ed081..d27e310fe 100644
--- a/packages/react-ui/src/components/molecules/Autocomplete.js
+++ b/packages/react-ui/src/components/molecules/Autocomplete.js
@@ -11,6 +11,7 @@ import {
 import { AddCircleOutlineOutlined } from '@mui/icons-material';
 import MenuItem from './MenuItem';
 import useImperativeIntl from '../../hooks/useImperativeIntl';
+import Typography from '../atoms/Typography';
 
 const filter = createFilterOptions();
 
@@ -18,7 +19,8 @@ const Autocomplete = forwardRef(
   (
     {
       creatable,
-      newItemTitle,
+      newItemLabel = 'c4r.form.add',
+      newItemIcon,
       freeSolo,
       renderOption,
       forcePopupIcon,
@@ -33,7 +35,7 @@ const Autocomplete = forwardRef(
     const intl = useIntl();
     const intlConfig = useImperativeIntl(intl);
 
-    const creatableOptions = (options, params) => {
+    const creatableFilterOptions = (options, params) => {
       const filtered = filter(options, params);
       const { inputValue } = params;
 
@@ -43,8 +45,9 @@ const Autocomplete = forwardRef(
         filtered.push({
           inputValue,
           title:
-            newItemTitle ||
-            `${intlConfig.formatMessage({ id: 'c4r.form.add' })} "${inputValue}"`
+            typeof newItemLabel === 'function'
+              ? newItemLabel(inputValue)
+              : `${intlConfig.formatMessage({ id: newItemLabel })} "${inputValue}"`
         });
       }
 
@@ -66,22 +69,46 @@ const Autocomplete = forwardRef(
 
     const creatableRenderOption = (props, option) => (
       <React.Fragment key={option.inputValue || option.title}>
-        {option.inputValue && <Divider />}
-        <MenuItem {...props}>
-          {option.inputValue && (
-            <ListItemIcon>
-              <AddCircleOutlineOutlined />
-            </ListItemIcon>
-          )}
-          <ListItemText>{option.title}</ListItemText>
-        </MenuItem>
+        {option.divider ? (
+          <Divider />
+        ) : (
+          <>
+            {option.inputValue && <Divider />}
+            <MenuItem
+              {...props}
+              fixed={option.fixed}
+              extended={option.extended}
+              dense={option.dense}
+              destructive={option.destructive}
+              disabled={option.disabled}
+              subtitle={option.subtitle}
+              iconColor={option.iconColor}
+            >
+              {option.inputValue && (
+                <ListItemIcon>{newItemIcon || <AddCircleOutlineOutlined />}</ListItemIcon>
+              )}
+              {option.startAdornment && !option.inputValue && (
+                <ListItemIcon>{option.startAdornment}</ListItemIcon>
+              )}
+              <ListItemText>
+                {option.alternativeTitle || option.title}
+                {option.secondaryText && (
+                  <Typography component='p' variant='caption' color='text.secondary'>
+                    {option.secondaryText}
+                  </Typography>
+                )}
+              </ListItemText>
+              {option.endAdornment}
+            </MenuItem>
+          </>
+        )}
       </React.Fragment>
     );
 
     return (
       <MuiAutocomplete
         {...otherProps}
-        filterOptions={creatable ? creatableOptions : filterOptions}
+        filterOptions={creatable ? creatableFilterOptions : filterOptions}
         getOptionLabel={creatable ? creatableOptionLabel : getOptionLabel}
         renderOption={creatable ? creatableRenderOption : renderOption}
         freeSolo={creatable || freeSolo}
@@ -93,7 +120,12 @@ const Autocomplete = forwardRef(
 
 Autocomplete.propTypes = {
   creatable: PropTypes.bool,
-  newItemTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  newItemLabel: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  newItemIcon: PropTypes.element
 };
 
 export default Autocomplete;
diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js
index d5f61dba5..1cb0c8fe1 100644
--- a/packages/react-ui/src/components/molecules/MenuItem.js
+++ b/packages/react-ui/src/components/molecules/MenuItem.js
@@ -5,7 +5,7 @@ import { MenuItem as MuiMenuItem, styled } from '@mui/material';
 const StyledMenuItem = styled(MuiMenuItem, {
   shouldForwardProp: (prop) =>
     !['subtitle', 'destructive', 'extended', 'iconColor', 'fixed'].includes(prop)
-})(({ subtitle, destructive, extended, iconColor, fixed, theme }) => ({
+})(({ dense, subtitle, destructive, extended, iconColor, fixed, theme }) => ({
   ...(subtitle && {
     pointerEvents: 'none',
     columnGap: 0,
@@ -13,14 +13,20 @@ const StyledMenuItem = styled(MuiMenuItem, {
     fontWeight: 500,
     color: theme.palette.text.secondary,
 
+    '.MuiListItemText-root .MuiTypography-root': {
+      ...theme.typography.caption,
+      fontWeight: 500,
+      color: theme.palette.text.secondary
+    },
+
     '&.MuiMenuItem-root': {
       minHeight: theme.spacing(3),
       paddingTop: 0,
       paddingBottom: 0,
+      marginTop: theme.spacing(1),
 
       '&:not(:first-of-type)': {
         minHeight: theme.spacing(5),
-        marginTop: theme.spacing(1),
         paddingTop: theme.spacing(1),
         borderTop: `1px solid ${theme.palette.divider}`
       }
@@ -33,6 +39,9 @@ const StyledMenuItem = styled(MuiMenuItem, {
     },
     '&.Mui-selected .MuiListItemIcon-root svg path': {
       fill: theme.palette.primary.main
+    },
+    '.MuiAutocomplete-listbox &[aria-selected="true"] svg path': {
+      fill: theme.palette.primary.main
     }
   }),
   ...(destructive && {
@@ -77,7 +86,7 @@ const StyledMenuItem = styled(MuiMenuItem, {
     }
   }),
   ...(extended && {
-    '&.MuiMenuItem-root': {
+    '&.MuiButtonBase-root.MuiMenuItem-root': {
       minHeight: theme.spacing(6)
     }
   }),
@@ -94,12 +103,26 @@ const StyledMenuItem = styled(MuiMenuItem, {
       padding: theme.spacing(0.5, 1.5),
       backgroundColor: theme.palette.background.paper,
       borderBottom: `1px solid ${theme.palette.divider}`
+    },
+    '.MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type': {
+      minHeight: theme.spacing(6),
+      marginTop: 0,
+
+      '&:hover': {
+        backgroundColor: theme.palette.background.paper
+      }
     }
   }),
   ...(!fixed && {
     '.MuiList-root &:first-of-type': {
       marginTop: theme.spacing(1)
     }
+  }),
+  ...(dense && {
+    '&.MuiButtonBase-root.MuiMenuItem-root': {
+      minHeight: theme.spacing(3),
+      padding: theme.spacing(0.25, 1.5)
+    }
   })
 }));
 
diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js
index 00388f18d..6f1876cc2 100644
--- a/packages/react-ui/src/theme/sections/components/forms.js
+++ b/packages/react-ui/src/theme/sections/components/forms.js
@@ -715,10 +715,19 @@ export const formsOverrides = {
             color: theme.palette.primary.main,
             backgroundColor: theme.palette.primary.background,
 
+            '.MuiTypography-root': {
+              color: theme.palette.primary.main
+            },
+            '.MuiTypography-caption': {
+              color: theme.palette.text.secondary
+            },
             '&.Mui-focused:hover': {
               backgroundColor: theme.palette.action.hover
             }
           },
+          '&:first-of-type': {
+            marginTop: theme.spacing(1)
+          },
 
           ...(ownerState.size === 'small' && {
             padding: theme.spacing(0.5, 1.5)
@@ -737,11 +746,16 @@ export const formsOverrides = {
       }),
 
       listbox: ({ ownerState, theme }) => ({
+        paddingTop: 0,
+
         '.MuiDivider-root': {
           display: 'none'
         },
         '.MuiButtonBase-root + .MuiDivider-root': {
           display: 'block'
+        },
+        '.MuiMenuItem-root:first-of-type': {
+          marginTop: theme.spacing(1)
         }
       })
     }
diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js
index 35a21172d..5ac01e9e9 100644
--- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js
+++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { IntlProvider } from 'react-intl';
 import {
+  Chip,
   Grid,
   InputAdornment,
   ListItemIcon,
@@ -102,7 +103,7 @@ const options = {
         type: 'text'
       }
     },
-    newItemTitle: {
+    newItemLabel: {
       control: {
         type: 'text'
       }
@@ -121,36 +122,79 @@ const options = {
 export default options;
 
 const top100Films = [
-  { title: 'The Shawshank Redemption', year: 1994, icon: <MovieOutlined /> },
-  { title: 'The Godfather', year: 1972, icon: <EditOutlined /> },
-  { title: 'The Godfather: Part II', year: 1974, icon: <AccessAlarmOutlined /> },
-  { title: 'The Dark Knight', year: 2008, icon: <AccountTreeOutlined /> },
-  { title: '12 Angry Men', year: 1957, icon: <AddCircleOutlined /> },
-  { title: "Schindler's List", year: 1993, icon: <AddTaskOutlined /> },
-  { title: 'Pulp Fiction', year: 1994, icon: <AnalyticsOutlined /> },
+  {
+    title: 'The Shawshank Redemption',
+    year: 1994,
+    startAdornment: <MovieOutlined />,
+    fixed: true
+  },
+  {
+    title: 'Extended item',
+    secondaryText: 'Secondary text',
+    year: 1972,
+    startAdornment: <EditOutlined />,
+    extended: true
+  },
+  {
+    title: 'The Godfather: Part II',
+    year: 1974,
+    startAdornment: <AccessAlarmOutlined />,
+    dense: true
+  },
+  {
+    title: 'The Dark Knight',
+    alternativeTitle: 'Movie: The Dark Knight',
+    year: 2008,
+    startAdornment: <AccountTreeOutlined />
+  },
+  {
+    title: '12 Angry Men',
+    year: 1957,
+    startAdornment: <AddCircleOutlined />,
+    iconColor: 'default'
+  },
+  {
+    title: "Schindler's List",
+    year: 1993,
+    startAdornment: <AddTaskOutlined />,
+    endAdornment: <Chip size='small' label='type' color='default' variant='outlined' />
+  },
+  { title: 'Subtitle', subtitle: true },
+  {
+    title: 'Pulp Fiction',
+    year: 1994,
+    startAdornment: <AnalyticsOutlined />,
+    disabled: true
+  },
   {
     title: 'The Lord of the Rings: The Return of the King',
     year: 2003,
-    icon: <AnimationOutlined />
+    startAdornment: <AnimationOutlined />
+  },
+  {
+    title: 'The Good, the Bad and the Ugly',
+    year: 1966,
+    startAdornment: <AutorenewOutlined />
   },
-  { title: 'The Good, the Bad and the Ugly', year: 1966, icon: <AutorenewOutlined /> },
-  { title: 'Fight Club', year: 1999, icon: <MovieOutlined /> },
+  { title: 'Fight Club', year: 1999, startAdornment: <MovieOutlined /> },
   {
     title: 'The Lord of the Rings: The Fellowship of the Ring',
     year: 2001,
-    icon: <BlockOutlined />
+    startAdornment: <BlockOutlined />
   },
   {
     title: 'Star Wars: Episode V - The Empire Strikes Back',
     year: 1980,
-    icon: <BookmarkAddOutlined />
+    startAdornment: <BookmarkAddOutlined />
   },
-  { title: 'Forrest Gump', year: 1994, icon: <BuildOutlined /> },
-  { title: 'Inception', year: 2010, icon: <MovieOutlined /> },
+  { title: 'Forrest Gump', year: 1994, startAdornment: <BuildOutlined /> },
+  { title: 'Inception', year: 2010, startAdornment: <MovieOutlined /> },
+  { title: 'divider', divider: true },
   {
     title: 'The Lord of the Rings: The Two Towers',
     year: 2002,
-    icon: <CheckCircleOutlined />
+    startAdornment: <CheckCircleOutlined />,
+    destructive: true
   }
 ];
 
@@ -910,7 +954,9 @@ const RenderOptionTemplate = ({
         renderInput={(params) => {
           if (selectedOption) {
             params.InputProps.startAdornment = (
-              <InputAdornment position='start'>{selectedOption.icon}</InputAdornment>
+              <InputAdornment position='start'>
+                {selectedOption.startAdornment}
+              </InputAdornment>
             );
           }
           return (
@@ -929,9 +975,22 @@ const RenderOptionTemplate = ({
         }}
         size={size}
         renderOption={(props, option) => (
-          <MenuItem {...props} key={option.title}>
-            <ListItemIcon>{option.icon}</ListItemIcon>
-            <ListItemText>{option.title}</ListItemText>
+          <MenuItem
+            {...props}
+            key={option.title}
+            fixed={option.fixed}
+            subtitle={option.subtitle}
+            extended={option.extended}
+            iconColor={option.iconColor}
+          >
+            <ListItemIcon>{option.startAdornment}</ListItemIcon>
+            <ListItemText>
+              {option.title}
+              <Typography component='p' variant='caption' color='text.secondary'>
+                {option.secondaryText}
+              </Typography>
+            </ListItemText>
+            {option.endAdornment}
           </MenuItem>
         )}
       />
@@ -955,7 +1014,7 @@ const CreatableTemplate = ({
     if (newOption.inputValue) {
       const newFilm = {
         title: newOption.inputValue,
-        icon: <NewReleasesOutlined />
+        startAdornment: <NewReleasesOutlined />
       };
       setCreatableTop100Films((prev) => [...prev, newFilm]);
     }
@@ -967,7 +1026,6 @@ const CreatableTemplate = ({
         {...args}
         creatable
         options={creatableTop100Films}
-        getOptionLabel={(option) => option.title}
         onChange={(event, newValue) => {
           if (newValue && newValue.inputValue) {
             handleAddOption(newValue);
@@ -992,6 +1050,79 @@ const CreatableTemplate = ({
   );
 };
 
+const CreatableWithPrefixAndSuffixTemplate = ({
+  label,
+  variant,
+  placeholder,
+  helperText,
+  error,
+  size,
+  required,
+  ...args
+}) => {
+  const [creatableTop100Films, setCreatableTop100Films] = useState(top100Films);
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  const handleAddOption = (newOption) => {
+    if (newOption.inputValue) {
+      const newFilm = {
+        title: newOption.inputValue,
+        startAdornment: <NewReleasesOutlined />
+      };
+      setCreatableTop100Films((prev) => [...prev, newFilm]);
+    }
+  };
+
+  return (
+    <IntlProvider locale='en'>
+      <Autocomplete
+        {...args}
+        creatable
+        options={creatableTop100Films}
+        onChange={(event, newValue) => {
+          if (newValue && newValue.inputValue) {
+            handleAddOption(newValue);
+          }
+          setSelectedOption(newValue);
+        }}
+        renderInput={(params) => {
+          if (selectedOption) {
+            params.InputProps.startAdornment = (
+              <InputAdornment position='start'>
+                {selectedOption.startAdornment}
+              </InputAdornment>
+            );
+            params.InputProps.endAdornment = (
+              <>
+                <InputAdornment position='start'>
+                  {selectedOption.endAdornment}
+                </InputAdornment>
+                <InputAdornment position='start'>
+                  {params.InputProps.endAdornment}
+                </InputAdornment>
+              </>
+            );
+          }
+          return (
+            <TextField
+              {...params}
+              label={label}
+              placeholder={placeholder}
+              helperText={helperText}
+              variant={variant}
+              error={error}
+              size={size}
+              required={required}
+              InputLabelProps={{ shrink: true }}
+            />
+          );
+        }}
+        size={size}
+      />
+    </IntlProvider>
+  );
+};
+
 const FreeSoloTemplate = ({
   label,
   variant,
@@ -1122,5 +1253,15 @@ CustomRenderOption.args = { ...commonArgs };
 export const Creatable = CreatableTemplate.bind({});
 Creatable.args = { ...commonArgs };
 
+export const CreatableCustomNewOption = CreatableTemplate.bind({});
+CreatableCustomNewOption.args = {
+  ...commonArgs,
+  newItemLabel: (value) => `Add this '${value}' new item`,
+  newItemIcon: <NewReleasesOutlined />
+};
+
+export const CreatableWithPrefixAndSuffix = CreatableWithPrefixAndSuffixTemplate.bind({});
+CreatableWithPrefixAndSuffix.args = { ...commonArgs };
+
 export const FreeSolo = FreeSoloTemplate.bind({});
 FreeSolo.args = { ...commonArgs };