What is the FormGroup Component in ReactJS?

What is the FormGroup Component in ReactJS?

BlueprintJS is a React-based UI toolkit for the web. So, in this article, we will see what is the FormGroup Component in ReactJS.

What is the FormGroup Component in ReactJS?

You can use this library to build interfaces that are complex data-dense for desktop applications. FormGroup Component provides a way to easily add some structure to forms. Also, this component supports more complex form controls. We can use the following approach in ReactJS to use the ReactJS Blueprint FormGroup Component.

FormGroup Props:

  • className: It is used to denote a space-delimited list of class names to pass along to a child element.
  • contentClassName: It is used to denote a space-delimited list of class names to pass along to the Classes.FORM_CONTENT element that contains children.
  • disabled: It is used to indicate whether the form group should appear as non-interactive or not.
  • helperText: It is used to denote the optional helper text.
  • inline: It is used to indicate whether to render the label and children on a single line or not.
  • intent: It is used to denote the visual intent color to apply to the element.
  • label: It is used to denote the label of this form group.
  • labelFor: It is used to denote the ID attribute of the labelable form element that this FormGroup controls.
  • labelInfo: It is used to denote the optional secondary text that appears after the label.
  • style: It is used to denote the CSS properties to apply to the root element.

Creating React Application:

1) Create a React application using the following command:

npx create-react-app foldername

2) After creating your project folder i.e. foldernamemove to it using the following command:

cd foldername

3) After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Example;

Now write down the following code. Here, we have demonstrated the FromGroup component with multiple input fields.

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { FormGroup, InputGroup } from "@blueprintjs/core";

function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>FormGroup Component in ReactJS</h4>
            <FormGroup
                label="Introduction Form:"
                labelFor="text-input"
            >
                Name: <InputGroup placeholder="Enter your Full Name" />
                Age: <InputGroup placeholder="Enter your Age" />
                Hobbies: <InputGroup placeholder="Enter your Hobbies" />
                Favorite Sport: <InputGroup placeholder="Enter your favorite sport" />
            </FormGroup>
        </div >
    );
}

export default App;

Run the application using the following command from the root directory of the project:

npm start

Output:

FormGroup Component

 

Conclusion:

So, in this article, we have been through what is the FormGroup Component in ReactJS. Also, feel free to comment with your suggestions and feedback on the post. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced ReactJS developers.

Request a Quote