@Material ui Autocomplete is it possible to show a custom label in getOptionLabel just like in renderOption?

there is the renderInput property where you can customize the output of the component. in it you can return a TextField which has a label property.

to customize the label you basicaly need to give it a className. To do so assign to the TextField a InputLabelProps property that accepts object of the label props like that InputLabelProps={{ className: "autocompleteLabel" }}

example:

<Autocomplete
       ...
        renderInput={(params) => {
          return (
            <TextField
              {...params}
              label={"choose " + resource}
              InputLabelProps={{ className: "autocompleteLabel" }}
              InputProps={{
                ...params.InputProps,
              }}
            />
          );
        }}
      />

now if you inspect the autocomplete component you'll find the class assigned to the label enter image description here

now that label is assigned with a class, you can do normal css