How to add fieldset in react js?

May 27, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add fieldset in react js, you can use <fieldset>. It will add fieldset in react js.

Today, I am going to show you, how to add fieldset in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following line to the top of your component file.

import React from 'react';

Step 3: Create a Component.

You can use <fieldset> to add fieldset in react js.

<form>
  <fieldset>
   <legend>Personal Information</legend>
    <div>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" />
    </div>
    <div>
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" />
    </div>
    <div>
      <label htmlFor="age">Age:</label>
      <input type="number" id="age" name="age" />
    </div>
  </fieldset>
  <fieldset>
    <legend>Account Information</legend>
      <div>
        <label htmlFor="username">Username:</label>
        <input type="text" id="username" name="username" />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input type="password" id="password" name="password" />
      </div>
    </fieldset>

    <button type="submit">Submit</button>
</form>

Define the add fieldset example.

The below code is an example of a React. You have to import react and use <fieldset> to add fieldset in react js.

App.js


import React from 'react';

function App() {
  return (
    <form>
      <fieldset>
        <legend>Personal Information</legend>
        <div>
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" name="name" />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" />
        </div>
        <div>
          <label htmlFor="age">Age:</label>
          <input type="number" id="age" name="age" />
        </div>
      </fieldset>
      
      <fieldset>
        <legend>Account Information</legend>
        <div>
          <label htmlFor="username">Username:</label>
          <input type="text" id="username" name="username" />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input type="password" id="password" name="password" />
        </div>
      </fieldset>

      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

In the above code example, I have used the <fieldset> and add fieldset in react js.

Check the output of the above code example.

All the best 👍