UI Layout help for a purchase order form


Need some ideas on how create a form for an order form. I want to create a reseller order form to replenish items.

I want to give them choice button, which they will use to use a category of products/brand (filter). then below that I want to give them another choice that will give them a list of items for the selected category. They choose the item and then insert the quantity. Every time they complete one line I will make the next choice/quantity component available up to given max (10 items).

I want to have the layout as :
[ choice 1 ] [quantity]
[ choice 2 ] [quantity]
[ choice 3 ] [quantity]

Currently the choice component takes the full length and I have to put the quantity on the next line, I am trying to make it look a little friendly.

Any ideas/suggestions ?

Thanks in advance…

Use tile inline list instead of choice components, and adjust it with little CSS.

Hi Uzo,

This looks awesome. Where are you inserting the CSS in the tile configuration ?


in a rich text component

Thanks Uzo,

Not an expert on CSS, but I was able to start changing some stuff.

Question :
How are you placing these 3-4 components in the same row ?
Are you using GRID or FLEX ?
Are you styling the parent of the 3-4 components ? We are trying to figure out how you would have wrapped the 3 components in a single div