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