How To Implement Radio Button In React?
Last Updated :
23 Jul, 2025
Radio buttons are commonly used to allow users to select one option from a set of predefined choices. In ReactJS, implementing radio buttons is easy and efficient with controlled components, where the state is used to manage the selected value.
In this article, we will explore how to create and manage radio buttons in React, including handling user selections and dynamically rendering options.
Prerequisites
Approach
To implement radio buttons in React, use the HTML radio input along with React's useState hook. Manage the selected value with useState and update the state using the onChange event handler.
Steps To Implement Radio Button In React
Create a react application by using this command
npx create-react-app radioButtonApp
cd radioButtonApp
Project Structure
Folder StructureExample 1: This example create a radio input that uses useState to manage and display selected radio button options, allowing users to choose between ReactJS, NextJS, and React Native.
JavaScript
import React, { useState } from "react";
function App() {
const [
selectedValue,
setSelectedValue,
] = useState("option1");
const handleRadioChange = (
value
) => {
setSelectedValue(value);
};
const styles = {
container: {
display: "flex",
flex: 1,
justifyContent: "center",
alignItems: "center",
},
heading: {
color: "green",
textAlign: "center",
},
radioGroup: {
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent:
"space-around",
marginTop: "20px",
borderRadius: "8px",
backgroundColor: "white",
padding: "30px",
boxShadow:
"0px 2px 3.84px rgba(0, 0, 0, 0.25)",
},
radioButton: {
display: "flex",
flexDirection: "row",
alignItems: "center",
},
radioLabel: {
marginLeft: "8px",
fontSize: "17px",
color: "#333",
},
};
return (
<div>
<h1 style={styles.heading}>
Geeksforgeeks
</h1>
<div
style={styles.container}
>
<div
style={
styles.radioGroup
}
>
<div
style={
styles.radioButton
}
>
<input
type="radio"
id="option1"
value="option1"
checked={
selectedValue ===
"option1"
}
onChange={() =>
handleRadioChange(
"option1"
)
}
/>
<label
htmlFor="option1"
style={
styles.radioLabel
}
>
ReactJS
</label>
</div>
<div
style={
styles.radioButton
}
>
<input
type="radio"
id="option2"
value="option2"
checked={
selectedValue ===
"option2"
}
onChange={() =>
handleRadioChange(
"option2"
)
}
/>
<label
htmlFor="option2"
style={
styles.radioLabel
}
>
NextJs
</label>
</div>
<div
style={
styles.radioButton
}
>
<input
type="radio"
id="option3"
value="option3"
checked={
selectedValue ===
"option3"
}
onChange={() =>
handleRadioChange(
"option3"
)
}
/>
<label
htmlFor="option3"
style={
styles.radioLabel
}
>
React Native
</label>
</div>
</div>
</div>
</div>
);
}
export default App;
Steps to run the app: To open the application, use the Terminal and enter the command listed below.
npm start
OR
npm run start
Output
Implement Radio Button In ReactExample 2: This example creates custom-styled radio button components that allow users to select between ReactJS, NextJS, and React Native, using useState to manage the selected option.
JavaScript
import React, { useState } from "react";
const styles = {
container: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
heading: {
color: "green",
textAlign: "center",
},
radioButton: {
padding: "12px 16px",
borderRadius: "8px",
margin: "8px",
border: "2px solid #007BFF",
background: "#fff",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "280px",
cursor: "pointer",
transition:
"background-color 0.3s, color 0.3s",
},
selected: {
background: "#007BFF",
color: "#fff",
borderColor: "#007BFF",
},
list: {
listStyleType: "none",
padding: 0,
textAlign: "center",
},
};
const CustomRadioButton = ({
label,
selected,
onSelect,
}) => (
<li>
<button
style={{
...styles.radioButton,
...(selected
? styles.selected
: {}),
}}
onClick={onSelect}
>
{label}
</button>
</li>
);
function App() {
const [
selectedValue,
setSelectedValue,
] = useState(null);
return (
<div>
<h1 style={styles.heading}>
Geeksforgeeks
</h1>
<div
style={styles.container}
>
<ul style={styles.list}>
<CustomRadioButton
label="ReactJS"
selected={
selectedValue ===
"option1"
}
onSelect={() =>
setSelectedValue(
"option1"
)
}
/>
<CustomRadioButton
label="NextJs"
selected={
selectedValue ===
"option2"
}
onSelect={() =>
setSelectedValue(
"option2"
)
}
/>
<CustomRadioButton
label="React Native"
selected={
selectedValue ===
"option3"
}
onSelect={() =>
setSelectedValue(
"option3"
)
}
/>
</ul>
</div>
</div>
);
}
export default App;
Output:
How to Implement Radio Button In React ?