CODEWITHSUNDEEP
reactjsradio-buttonantdradio-group
loklba
loklba

Reputation: 31

Ant Design - Reactjs: radio buttons group

I am newbie, and I have a reactjs antd issue with radio buttons group. Is there any way to have a bigger gap or space between each radio button? For example one radio button on left side of the page and second on the other side. https://codesandbox.io/s/radio-group-antd-4-19-4-forked-134cps?from-embed ignore the slider in code please.

Upvotes: 1

Views: 10631

Answers (3)

Siddharth Bagal
Siddharth Bagal

Reputation: 634

use ant Row with justify content "space-between"

<Radio.Group
  onChange={(e) => {
    console.log("radio checked", e.target.value);
    setcurrentValueRadio(e.target.value);
  }}
  value={currentValueRadio}
  style={{ width: "100%" }}
>
  <Row justify="space-between">
    <Radio value={1}>2021</Radio>
    <Radio value={2}>2022</Radio>
  </Row>
</Radio.Group>;

Upvotes: 2

Ved
Ved

Reputation: 1028

Use can use Antd grid to align the radio buttons

import { Radio, Row, Col } from "antd";

<Radio.Group
        onChange={(e) => {
          console.log("radio checked", e.target.value);
          setcurrentValueRadio(e.target.value);
        }}
        value={currentValueRadio}
        style={{ width: "100%" }}
      >   
        <Row>
          <Col span={12} align="left">
            <Radio value={1}>2021</Radio>
          </Col>
          <Col span={12} align="right">
            <Radio value={2}>2022</Radio>
          </Col>
        </Row>       
</Radio.Group>

Screenshot:

Screenshot

Upvotes: 1

FieryTorrent
FieryTorrent

Reputation: 1

If you make a css class then you can style your react components. Here's how I did it in your sandbox:

// in index.css
.radioLeft {
  right: 0%;
  position: absolute;
}

// in index.js
<Radio value={2} className='radioLeft'>2022</Radio>

This will put the 2022 radio at the very right side of the screen, on the same y-dimension as the first radio button. You can change the 'right' value in 'index.css' to adjust it as you please.

Upvotes: 0

Related Questions