How to align <s-choice-list> options horizontally in Polaris Web Components?

Polaris
1

Hi everyone,

I’m using the Polaris Web Components <s-choice-list> component for the App Home and by default the options are displayed vertically.

Is there any way to make the choices align horizontally instead?

I couldn’t find any prop in the docs that controls layout direction (like inline or horizontal).
Is this supported natively, or does it require custom CSS?

Any guidance would be appreciated. Thanks!

2

Hi @ariyan_irl,

We don’t support this natively for <s-choice-list>.
Is there a particular reason you need this functionality? Are you aiming for a specific UX design?

3

Hello @ariyan_irl
Please use grid layout and use choice list inside that for align horizontally as per need.

Grid layout

image
image1366×604 18.4 KB

4

Hi Paige, just following up here. It does seem Shopify adopts a horizontal layout on smart collection conditions. I was hoping to match this in my app, meaning merchants will be familiar with this layout/design.

Screenshot 2026-05-20 at 11.45.49
Screenshot 2026-05-20 at 11.45.491318×476 15.6 KB

5

I forgot about the smart collections page! I’ll look into the recommended approach for that kind of UX and follow up.

6

Our smart collections page is using React Components there with Radio Button and Inline Stack :sweat_smile:

I’ve confirmed internally that there’s no recommended approach for aligning options horizontally with web components right now. There are no plans to add this feature at the moment, but I can submit a future request.