How do I divide the Office UI Fabric ChoiceGroup into 2 rows and 5 columns?

Question

I am new to UI, and currently working on making on creating options using Fluent UI ChoiceGroup. I have 10 entries, let's say 0,1,2,3,4,5,6,7,8,9. I am trying to force UI to always show like

0 1 2 3 4

5 6 7 8 9

but it changes according to width.

There is no property that I can attach in the choiceGroup as well. It looks like some CSS stuff.

Please guide me with this. Thank you.

Answer 1

I don't see better way to achieve that scenario then to put fixed width of ChoiceGroup root element:

<ChoiceGroup styles={{ root: { width: 500 } }} label="Pick one icon" defaultSelectedKey="day" options={options} />

Items inside ChoiceGroup are wrapped with flexContainer which includes:

display: flex;
flex-wrap: wrap;

You can modify it if you need:

<ChoiceGroup styles={{ flexContainer: { flexWrap: 'nowrap' } }} defaultSelectedKey="day" options={options} />

Codepen working example.