How to render s-choice-list options inline (horizontally)?

Polaris
1

I’m migrating from React Polaris to Polaris Web Components. Previously I had two radio buttons laid out horizontally using InlineStack:

<InlineStack gap="500">
  <RadioButton
    label="Same as order numbers"
    name="invoice-format"
    {...asChoiceField(fields.invoiceNumberFormatV2, "original")}
  />
  <RadioButton
    label="Custom invoice numbers"
    name="invoice-format"
    {...asChoiceField(fields.invoiceNumberFormatV2, "custom")}
  />
</InlineStack>

The closest web-component equivalent appears to be s-choice-list with s-choice children:

<s-choice-list
  name="invoice-format"
  label="Invoice format"
  labelAccessibilityVisibility="exclusive"
  values={[fields.invoiceNumberFormatV2.value ?? ""]}
  onChange={(event) => {
    fields.invoiceNumberFormatV2.onChange(event.currentTarget.values?.[0]);
  }}
>
  <s-choice value="original">Same as order numbers</s-choice>
  <s-choice value="custom">Custom invoice numbers</s-choice>
</s-choice-list>

This works functionally, but the two choices always render stacked vertically. I can’t find an inline / orientation / direction prop in the s-choice-list

Question: Is there a supported way to render s-choice options horizontally inside s-choice-list? If not, what’s the recommended pattern for two mutually exclusive options laid out inline using Polaris Web Components?

Using radio button:

image
image1422×518 21.2 KB

Using s-choice-list:

image
image1396×502 10.6 KB

2

I tried using s-choice-list and inline stack layouts, but it was not behaving properly in my case either.
Instead, I ended up using plain s-checkbox components arranged horizontally, similar to how we already handle grouped filters/conditions in our applications.
Something like this worked more reliably for me:

<s-stack direction="inline" gap="base">
  <s-checkbox
    label="Products"
    checked={checkBox.includes("products")}
    onInput={(e) =>
      handleCheckboxChange("products", e.currentTarget.checked)
    }
  />

  <s-checkbox
    label="Collections"
    checked={checkBox.includes("collections")}
    onInput={(e) =>
      handleCheckboxChange("collections", e.currentTarget.checked)
    }
  />

  <s-checkbox
    label="Product Tags"
    checked={checkBox.includes("productTags")}
    onInput={(e) =>
      handleCheckboxChange("productTags", e.currentTarget.checked)
    }
  />
</s-stack>
3

I just ran into this issue myself, but this solution won’t work for me because its checkboxes, not radio buttons.

4

Kinda insane that the devs cannot do something as simple as adding a prop like direction="inline" while we have to do some DYI workarounds to do something that was perfectly working with the React components.