How to change order of the Children in Multi-Select custom ValueContainer?

[Wdifulvio523]

custom value container renders children, which is split into the selected values and the Input (cursor to type).

I want to be able to reverse this so that the input shows up before the selected values. How can this be done?

[Rall3n]

Hello @Wdifulvio523,

you can easily achieve this layout by using the styling framework of the Select component. We mostly use Flexbox for the layouts, so you can easily change the order of values and input element by using the order property.

<Select
  styles={{
    input: (provided) => ({
      ...provided,
      order: -1,
      flex: 0 // To prevent it from taking up all the space by default
    })
  }}
/>