CODEWITHSUNDEEP
reactjsantd
Mikhail
Mikhail

Reputation: 9007

Ant design split Radio.Group into two sections

I'd like to split a Radio.Group into two or more rows but keep a maximum of 1 selected value. In plain HTML as long as you use the same name the radio buttons unselect when a value is changed. I can't reproduce this with ant.

<Radio.Group name="stone_color" options={["Red", "Blue"]} optionType={"button"}
                   buttonStyle={"solid"} />
<Radio.Group name="stone_color" options={["Green", "Yellow"]} optionType={"button"}
                   buttonStyle={"solid"} />

Even though these share the name they still allow two values to be selected at the same time.

Upvotes: 1

Views: 932

Answers (2)

umair
umair

Reputation: 534

You can achieve it by adding block components or passing style prop with {display:"block"} for Radio component.

<Radio.Group>
  <div>
    <Radio value="red"> Red </Radio>
    <Radio value="green"> Green </Radio>
  </div>
  <div>
    <Radio value="yellow"> Yellow </Radio>
    <Radio value="blue"> Blue </Radio>
  </div>
</Radio.Group>

Upvotes: 1

Chanandrei
Chanandrei

Reputation: 2421

In order to achieve it you only need a one Radio.Group and inside that you can create a layout.. see this link.

If your data are from array I suggest that use a map and put some separation logic on it.

Upvotes: 1

Related Questions