How to create a React Radio Button

Radio buttons are one of the most common user interface components that developers use in web applications. These buttons are useful when you want to give your users the option to choose a single option from a list of options.

In this tutorial, we’ll walk you through how to create a React Radio Button component. We’ll cover the basic concepts of React, explain how to create a basic radio button component, and show you how to customize its appearance and behavior.

What is React?

React is a popular JavaScript library created by Facebook for building user interfaces. It allows developers to create reusable UI components and efficiently update the DOM without having to worry about low-level details such as updating the DOM directly.

React follows a uni-directional flow of data where data flows from the top-level component down to its child components. This allows developers to create clean and maintainable code, as it helps to eliminate unwanted side effects.

Basic Radio Button Component

To create a basic React Radio Button component, we need to follow a few simple steps. First, we need to set up our React environment by installing the required packages and creating our project structure.

Next, we need to create a new component and import it into our main application. We’ll then create a basic form with a list of radio button options, and finally, we’ll add some custom styling to our radio button component to give it a unique look.

Setting up Our React Environment

Before we start building our radio button component, we need to set up our React environment. For this tutorial, we’ll be using Create React App to create our project. Create React App is an excellent tool that allows developers to set up their projects quickly and comes with built-in scripts to automate common tasks.

Here are the steps to set up a new Create React App project:

1. Open your terminal or command prompt and navigate to the directory where you want to create your project.

2. Run the following command to create a new project:
   

npx create-react-app my-radio-button

1. Navigate to the project directory:

cd my-radio-button

1. Launch the project with the following command:

npm start

Creating Our Radio Button Component

Our first step in creating a React Radio Button component is to create a new component. Let’s create a file called RadioButton.js inside the src folder and add the code below.

import React from 'react';

const RadioButton = () => (
  <div>
    <label>
      <input type="radio" name="option" value="option1" />
      Option 1
    </label>
    <br />
    <label>
      <input type="radio" name="option" value="option2" />
      Option 2
    </label>
    <br />
    <label>
      <input type="radio" name="option" value="option3" />
      Option 3
    </label>
  </div>
);

export default RadioButton;

In the code above, we’ve created a new component called RadioButton. Inside this component, we’ve added three radio buttons with different values and labels. We’ve also wrapped each radio button inside a <label> tag to associate it with its corresponding label.

Importing Our Component

Now that we’ve created our RadioButton component, we need to import it into our main application. Let’s open the App.js file in our src folder and add the following code.

import React from 'react';
import RadioButton from './RadioButton';

const App = () => (
  <div>
    <RadioButton />
  </div>
);

export default App;

In the code above, we’ve imported our RadioButton component and added it to our main App component. We can now test our radio buttons by running our application and checking the browser.

Customizing the Radio Button

Our basic radio button component works, but it doesn’t look very good. Let’s add some custom styling to make it more visually appealing. To do this, we’re going to use Styled Components, a popular CSS-in-JS library that allows us to write CSS in our JavaScript code.

First, we need to install the styled-components package by running the following command:

npm install styled-components

Next, let’s update our RadioButton component to use Styled Components.

import React from 'react';
import styled from 'styled-components';

const Label = styled.label`
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
`;

const RadioInput = styled.input`
  margin-right: 10px;
`;

const RadioButton = () => (
  <div>
    <Label>
      <RadioInput type="radio" name="option" value="option1" />
      Option 1
    </Label>
    <Label>
      <RadioInput type="radio" name="option" value="option2" />
      Option 2
    </Label>
    <Label>
      <RadioInput type="radio" name="option" value="option3" />
      Option 3
    </Label>
  </div>
);

export default RadioButton;

In the code above, we’ve added two new components called Label and RadioInput. We’ve used the styled-components library to create these components and added some custom styles to them.

The Label component is responsible for styling the label tag for each radio button. It sets the display property to flex to center the radio button and label text vertically. It also adds some space at the bottom of each label to separate the radio buttons and set a font size of 16px.

The RadioInput component is responsible for styling the radio button itself. We’ve added some margin to the right of each radio button to separate it from its label.

Finally, we’ve updated our JSX code to use our new Label and RadioInput components instead of the default HTML elements.

Conclusion

In this tutorial, we’ve walked you through how to create a basic React Radio Button component. We’ve covered the basics of React, added some custom styling to our component using the styled-components library, and shown you how to import and use the component in your main application.

By following this tutorial, you should now have a good understanding of how to create a React Radio Button and how to customize its appearance and behavior. The code we’ve written can be easily modified and expanded to create more complex radio button components to suit your needs. Happy coding!