How to create custom Radio Button in React

How many of you faced a situation where you have used native inputs which are provided by the OS like Select, date, Radio Button, etc and you want to see same UI across all platforms. Well that’s pretty common case the solution is to create your own Custom Components which will gonna have same UI because they not depends on the OS. In this article we will gonna learn how to create custom Radio button in React.

Custom Radio Button in React

Creating radio button in React is very simple. We gonna create a simple component which gonna receive 4 props i.e

1. text for showing the radio button text.
2. onChange for updating the value of selected radio button.
3. value will be the current radio button value.
4. selected will be the current selected radio button value.

Radio.propTypes = {
  text: PropTypes.node.isRequired,
  onChange: PropTypes.func.isRequired,
  selected: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired
};

Our component will gonna return only a div with two child divs. First child div for showing the radio circle and second child div for showing the helper text.

   return (
      <div
        className="modern-radio-container"
        onClick={() => {
          onChange(value);
        }}
      >
        <div
          className={`radio-outer-circle ${value !== selected && "unselected"}`}
        >
          <div
            className={`radio-inner-circle ${value !== selected &&
              "unselected-circle"}`}
          />
        </div>
        <div className="helper-text">{text}</div>
      </div>
    );

In the end our final Radio component will gonna look like this.

import PropTypes from "prop-types";
import React, { Component } from "react";
import "./radio.css";

export class Radio extends Component {
  state = {};

  render() {
    const { selected, onChange, text, value } = this.props;
    return (
      <div
        className="modern-radio-container"
        onClick={() => {
          onChange(value);
        }}
      >
        <div
          className={`radio-outer-circle ${value !== selected && "unselected"}`}
        >
          <div
            className={`radio-inner-circle ${value !== selected &&
              "unselected-circle"}`}
          />
        </div>
        <div className="helper-text">{text}</div>
      </div>
    );
  }
}

Radio.propTypes = {
  text: PropTypes.node.isRequired,
  onChange: PropTypes.func.isRequired,
  selected: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired
};

We also gonna add some necessary css for a better UI.

.modern-radio-container {
  margin: 24px 0;
  display: flex;
  cursor: pointer;
  user-select: none;
}

.radio-outer-circle {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 2px solid #0d5bc6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  transition: all 0.1s linear;
}

.radio-inner-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0d5bc6;
  transition: all 0.1s linear;
}
.unselected {
  border: 2px solid #666;
}
.unselected-circle {
  width: 0;
  height: 0;
}
.helper-text {
  color: #666;
  padding-right: 8px;
}

After that we will just gonna import our custom Radio button and start using it.

import React, { useState } from "react";
import "./styles.css";
import { Radio } from "./Radio";
export default function App() {
  const [selected, setSelected] = useState("first");
  return (
    <>
      <Radio
        value="first"
        selected={selected}
        text="First Radio Button"
        onChange={setSelected}
      />
      <Radio
        value="second"
        selected={selected}
        text="Second Radio Button"
        onChange={setSelected}
      />
    </>
  );
}

In the end we will gonna get this beautiful UI which will be consistent on every OS.

I hope you have liked this way to create custom Radio button in React.

How to create Carousel component in React using react-slick