Create 3D Radio Buttons in React

3D Radio Buttons are a fancier version of regular radio buttons. They have a cool 3D look with shadows and animations, which makes them attractive and appealing to the user. In this article, we will create 3d radio buttons with the help of React.

Preview of 3D Radio Buttons:

Prerequisites:

• React JS
• CSS
• JSX
• useState Hook

Approach to Create 3D Radio Buttons:

• Create a functional React components named RadioButton1 and RadioButton2.
• Use the useState hook to manage the selected option's state.
• Define a function handleOptionChange to update the selected option.
• Represents the radio button choices and labels within a div structure. Each radio button consists of an input, a div with a ball, and a label.
• Applies dynamic styles based on the selected option, leveraging the checked attribute and conditional rendering in JSX.

Steps to Create the React App:

Step 1: Create a new React project using Create React App.

npx create-react-app radio-buttons
cd radio-buttons

Step 2: Create a folder “components” in src file and add the two different radio button files named RadioButton1.js and RadioButton2.js, along with their CSS files.

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "run": "^1.4.0",
 "web-vitals": "^2.1.4"
}

Example: Write the following code in the respective file.

To run the application run the following command in the terminal

npm start

Output: