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