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:
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.
Contact Us