Usage of Radio Button in React js | Updated 2024

102

In React JS, handling user inputs like radio buttons is an essential part of creating interactive web applications. Radio buttons allow users to select one option from a set, making them a popular choice for forms and surveys. In this article, we’ll explore how to use radio buttons in a React application. We’ll cover the basics of setting up radio buttons, handling their state, and processing the selected value upon form submission.

Setting Up the Project

First, ensure you have a React environment set up. You can create a new React app using Create React App by running the following command:

npx create-react-app radio-button-example
cd radio-button-example
npm start

This command sets up a new project and runs the development server.

Creating the Radio Button Component Basic example

Let’s start by creating a simple form with radio buttons. We’ll use functional components and React hooks (useState) for state management.

Here is a basic example of a component with radio buttons:

import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('You selected: ' + selectedOption);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Option 1:
        <input
          type="radio"
          value="Option 1"
          checked={selectedOption === 'Option 1'}
          onChange={handleOptionChange}
        />
      </label>
      <label>
        Option 2:
        <input
          type="radio"
          value="Option 2"
          checked={selectedOption === 'Option 2'}
          onChange={handleOptionChange}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default RadioButtonForm;

Preparing the Component for Dynamic Radio Buttons

Let’s assume we want to create a form where the radio button options are determined at runtime. We’ll modify our existing RadioButtonForm component to accept a list of options as props and render radio buttons for each option dynamically.

Here’s how you can update your component to handle dynamic radio options:

import React, { useState } from 'react';
function RadioButtonForm({ options }) {
  const [selectedOption, setSelectedOption] = useState(options.length > 0 ? options[0].value : '');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('You selected: ' + selectedOption);
  };

  return (
    <form onSubmit={handleSubmit}>
      {options.map(option => (
        <label key={option.value}>
          {option.label}:
          <input
            type="radio"
            value={option.value}
            checked={selectedOption === option.value}
            onChange={handleOptionChange}
          />
        </label>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
}

export default RadioButtonForm;

How to add Validation on the Radio Button in React JS?

To add validation to our existing dynamic radio button component, we’ll include a simple validation mechanism that checks if the user has selected an option before submitting the form. We’ll update the component to display an error message if no option is selected upon form submission.

Here’s how you can integrate validation into the RadioButtonForm component:

import React, { useState } from 'react';
function RadioButtonForm({ options }) {
  const [selectedOption, setSelectedOption] = useState('');
  const [error, setError] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
    setError(''); // Clear error on new selection
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!selectedOption) {
      setError('Please select an option.');
      return;
    }
    alert('You selected: ' + selectedOption);
  };

  return (
    <form onSubmit={handleSubmit}>
      {options.map(option => (
        <label key={option.value}>
          {option.label}:
          <input
            type="radio"
            value={option.value}
            checked={selectedOption === option.value}
            onChange={handleOptionChange}
          />
        </label>
      ))}
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}
export default RadioButtonForm;

How to check the radio button on the div click in React JS?

We’ll adjust our RadioButtonForm component so that each radio button can be selected by clicking anywhere within its label container. This involves wrapping each radio button and its label in a div and handling the click event on that div.

Here’s how you can implement this feature:

import React, { useState } from 'react';

function RadioButtonForm({ options }) {
  const [selectedOption, setSelectedOption] = useState('');
  const [error, setError] = useState('');

  const handleOptionChange = (value) => {
    setSelectedOption(value);
    setError(''); // Clear error on new selection
  };

  const handleDivClick = (value) => {
    handleOptionChange(value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!selectedOption) {
      setError('Please select an option.');
      return;
    }
    alert('You selected: ' + selectedOption);
  };

  return (
    <form onSubmit={handleSubmit}>
      {options.map(option => (
        <div key={option.value} onClick={() => handleDivClick(option.value)} style={{ cursor: 'pointer', padding: '10px' }}>
          <label>
            {option.label}:
            <input
              type="radio"
              value={option.value}
              checked={selectedOption === option.value}
              onChange={() => handleOptionChange(option.value)}
              style={{ marginRight: '10px' }}
            />
          </label>
        </div>
      ))}
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default RadioButtonForm;

Conclusion

Dynamic radio buttons in React JS provide a flexible way to handle variable numbers of user options in forms. By adapting our components to accept props and render based on state, we can easily integrate with any data source, enhancing the component’s usability across different scenarios. This approach enables developers to build more adaptive and responsive web applications.

Radio Button in React js – FAQs