How to Implement Radio Button In React ?
Implementing radio buttons in React is a fundamental task when it comes to designing interactive user interfaces. In this article, weāll look at how to make a radio button in React. A radio button is a graphical user interface element that allows people to make an exclusive choice among numerous alternatives.
Prerequisites
- Introduction to React
- React Components
- React Hooks
- NPM or NPX
Steps to Create a React Application
Step 1: Create a react application by using this command
npx create-react-app radioButtonApp
Step 2: After creating your project folder, i.e. radioButtonApp, use the following command to navigate to it:
cd radioButtonApp
Project Structure
Example 1: This React example illustrates how to create a simple radio button group using the useState hook for state management. The component efficiently maintains a selected option and updates it based on user input. To enhance visual appeal and structure, internal CSS styles are implemented to center-align the radio buttons and labels within a contaĀiner. By selecting one of the provided optionsāReactJS, NextJs, or React Nativeāusers can make a single choice as the state gets updated accordingly.
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}> w3wiki </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
To open the application, use the Terminal and enter the command listed below.
npm start
OR
npm run start
Output:
Example 2: In this example, the radio buttons are thoughtfully arranged in a list format, allowing users to easily choose one option from the available choices. There is even visual feedback when a selection is made, as the clicked radio button changes color to indicate the chosen option. To enhance user interaction, the application leverages Reactās useState hook to manage and update the selected optionās state effectively.
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}> w3wiki </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:
Contact Us