Show MultiValueLabels in a columnwise fashion

Question

In the following image I want to have the labels of my multi-value Select component be underneath each other in a columnwise fashion.

<Select
    closeMenuOnSelect={false}
    components={makeAnimated()}
    options={optionsIngameMode}
    defaultValue={optionsIngameMode}
    noOptionsMessage={() => "No game modes selected"}
    isMulti
    autoFocus
/>

How can I achieve this?

Answer 1

This can easily be done by setting multiValue width to 100% to fill the all of the container space

const customStyles = {
  multiValue: (provided) => ({
    ...provided,
    width: "100%"
  }),
  multiValueLabel: (provided) => ({
    ...provided,
    marginRight: "auto", // push the delete icon to the far right
  }),
  input: (provided) => ({
    ...provided,
    display: "none"
  }),
  valueContainer: (provided) => ({
    ...provided,
    minHeight: 30
  }),
};

export default () => (
  <Select isMulti styles={customStyles} options={colourOptions} />
);

Live Demo