Fluentui: horizontal choice group

[wyl765]

the default choice group is vertical, how to customize to horizontal choice group?

[aneeshack4]

I believe @srideshpande has worked on ChoiceGroup - Sri, do you know how to go about customizing choicegroup to be horizontal?

[paulmech]

adding CSS similar to the following worked for me:

.ms-ChoiceField {
    flex: 1;
}

.ms-ChoiceFieldGroup-flexContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.ms-ChoiceField-wrapper {
    min-width: 20em;
}

[aneeshack4]

Seems like this was resolved with @paulmech's comment - thanks Paul!

[shaipetel]

this example changes all radios on the page.
You might want to create a custom css class for horizontal ones, or if you want to set it to a specific control without using CSS:

1. set the flexContainer style to display:flex.
2. you will notice a space might be needed at the end of the options, I added a non-breaking space as \u00A0

<ChoiceGroup selectedKey={valueType} styles={{ flexContainer: { display: "flex" } }} options={[ { key: 'specific', text: 'selected\u00A0\u00A0' }, { key: 'relative', text: 'relative' }]} />

done!