BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. FormGroup Component provides a way for users to easily add some structure to forms as 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 And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure: It will look like the following.
Project Structure
Example 1: Now write down the following code in the App.js file. Here, we have demonstrated the FromGroup component with the single input field.
Javascript
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>ReactJS Blueprint FormGroup Component</h4> <FormGroup helperText="Enter full name with atleast 3 chars" label="User Form" labelFor="text-input" > <InputGroup id="text-input" placeholder="Enter your username" /> </FormGroup> </div > ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: Now write down the following code in the App.js file. Here, we have demonstrated the FromGroup component with the multiple input field.
Javascript
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>ReactJS Blueprint FormGroup Component</h4> <FormGroup label="Exam Form:" labelFor="text-input" > Name: <InputGroup placeholder="Enter your Full Name" /> Age: <InputGroup placeholder="Enter your Age" /> Address: <InputGroup placeholder="Enter Full Address" /> Exam Center: <InputGroup placeholder="Enter your Exam center" /> </FormGroup> </div > ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://blueprintjs.com/docs/#core/components/form-group
