React - multiple radio buttons

3 points
Created by:

In this article we would like to show you how to use multiple radio buttons in React.

Multiple radio buttons in ReactJS.
Multiple radio buttons in ReactJS.

Below example uses RadioInput functional component which renders label with a single input type="radio" (radio button).

In our Form we have two groups of RadioInput elements. One group for setting gender, second for setting role.

In every group we can select only one radio button at the same time, then in Gender group setGender function sets gender and in Role group setRole function sets role depends on which option we chose.

Practical example:

// ONLINE-RUNNER:browser;

//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';

const RadioInput = ({label, value, checked, setter}) => {
	return (
	    <input type="radio" checked={checked == value}
	           onChange={() => setter(value)} />
const Form = props => {
	const [gender, setGender] = React.useState();
	const [role, setRole] = React.useState();
	const handleSubmit = e => {
		const data = {gender, role};
		const json = JSON.stringify(data, null, 4);
	return (
	  <form onSubmit={handleSubmit}>
	      <RadioInput label="Male" value="male" checked={gender} setter={setGender}  />
	      <RadioInput label="Female" value="female" checked={gender} setter={setGender} />
	      <RadioInput label="Admin" value="admin" checked={role} setter={setRole} />
	      <RadioInput label="User" value="user" checked={role} setter={setRole}  />
	    <button type="submit">Submit</button>

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );

Related posts


React - multiple radio buttons
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂