How to Use Radio Buttons in ReactJS: A Complete Guide (2026)

ReactJS is a powerful JavaScript library for building user interfaces. One common UI element used in web applications is the radio button, which allows users to select one option from a set. In this tutorial, you'll learn how to implement radio buttons in a ReactJS component and handle user input effectively. This guide is perfect for beginners who are new to ReactJS and want to understand how radio buttons can be used within a dynamic component.

Key Takeaways

• Understand how to implement radio buttons in ReactJS.
• Learn to manage state and handle events with radio buttons.
• Display selected values dynamically in the component footer.
• Troubleshoot common errors and issues with radio button implementation.

Introduction

Radio buttons are essential components in web forms where users need to select one option from a group. In ReactJS, handling radio buttons requires understanding of state management and event handling. This tutorial will guide you through setting up a React component with radio buttons, managing user input, and displaying the selected option. By the end, you'll be confident in incorporating radio buttons into your React applications.

You'll see how to use React's state and event handling to manage user choices dynamically and learn why these techniques are critical for creating interactive, user-friendly applications. This tutorial also includes troubleshooting tips to help you avoid common pitfalls.

Prerequisites

• Basic knowledge of JavaScript and ES6 syntax.
• Familiarity with ReactJS fundamentals, including components and props.
• Node.js installed on your machine for setting up a React application.

Step 1: Set Up Your React Environment

First, ensure you have the latest version of Node.js and npm installed on your machine. Use the Create React App tool to set up a new React project:

npx create-react-app radio-button-tutorial

Navigate into your project directory:

cd radio-button-tutorial

Start the development server:

npm start

Step 2: Create a Radio Button Component

Create a new file named RadioButtonGroup.js in the src directory. This component will render a list of radio buttons and manage user selection through React's state.

import React, { useState } from 'react';

function RadioButtonGroup() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    
      Select an Option:
      
        
          
          Option 1
        
        
          
          Option 2
        
        
          
          Option 3
        
      
      Selected Option: {selectedOption}
    
  );
}

export default RadioButtonGroup;

This component uses the useState hook to track which radio button is selected. The handleOptionChange function updates the state whenever a radio button is clicked.

Step 3: Integrate the Component into Your App

Now, integrate the RadioButtonGroup component into your main application file App.js:

import React from 'react';
import './App.css';
import RadioButtonGroup from './RadioButtonGroup';

function App() {
  return (
    
      
        React Radio Button Example
        
      
    
  );
}

export default App;

Run your application with npm start to see the radio buttons in action. You should be able to select an option and see the selected value displayed below the radio buttons.

Step 4: Display Selection in the Footer

To display the selected option in the footer, update the App.js file to include a footer section:

function App() {
  const [selectedOption, setSelectedOption] = React.useState('');

  const handleOptionChange = (option) => {
    setSelectedOption(option);
  };

  return (
    
      
        React Radio Button Example
        
      
      Selected Option: {selectedOption}
    
  );
}

Pass the handleOptionChange function as a prop to the RadioButtonGroup component, and modify the component to call this function when an option changes:

function RadioButtonGroup({ onOptionChange }) {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    const option = event.target.value;
    setSelectedOption(option);
    onOptionChange(option);
  };
  // ...rest of the component
}

With this setup, the selected radio button value is displayed in the footer of the application, enhancing the user experience by providing immediate feedback.

Common Errors/Troubleshooting

• Radio button not selectable: Ensure the checked attribute is correctly bound to the component's state.
• State not updating: Verify that the event handler is correctly updating the state with setState or useState.
• Incorrect props: Double-check that props are passed and received correctly between components.

Conclusion

In this tutorial, you learned how to implement radio buttons in ReactJS, manage user input, and display selections dynamically. By understanding and applying these concepts, you can create more interactive and responsive applications. As you continue to work with ReactJS, consider exploring more complex state management solutions such as Redux for larger applications.

Frequently Asked Questions

Why use radio buttons in React?

Radio buttons are ideal for allowing users to select one option from a set. They integrate well with React's state management, making them easy to use in dynamic applications.

How do I handle radio button state in React?

Use React's useState hook to track which radio button is selected and update the state on change using an event handler.

What common errors should I watch out for?

Ensure the checked attribute is linked to the state, and verify event handlers are correctly updating the state. Also, check for proper prop passing between components.