Chakra UI is the React component library for building attractive and responsive user interfaces. FormControl is the top-level form component inside which we can place our inputs, labels, tooltips, buttons, radio buttons, checkboxes, combo boxes, text areas, and validations. It acts as a wrapper to its form input components. The input component is a component that is used to get user input in a text field or other fields as mentioned. Many more input fields are available for FormControl.
Pre-requisites:
Approach:
We will build a form using Chakra UI. We will be using the form input components FormControl, FormLabel, RadioGroup, Checkbox, Select box, TextArea, Button, and so on with different sizes and style properties.
Steps to Create React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app my-form-app
Step 2: After creating your project folder(i.e. my-form-app), move to it by using the following command:
cd my-form-app
Step 3: After creating the React application, Install the required package using the following command:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
Project Structure:
The updated dependencies in the package.json file.
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
Example: Write down the code in respective files. Inside your src folder, open App.js, where we will write our Form input code. Below is the code for the same.
JavaScript
// App.js
import {
ChakraProvider, Text
} from "@chakra-ui/react";
import Article from "./Article";
function App() {
return (
<ChakraProvider>
<Text
color="#2F8D46"
fontSize="2rem"
textAlign="center"
fontWeight="400"
my="1rem">
GeeksforGeeks - React JS Chakra UI concepts
</Text>
<Article />
</ChakraProvider>
);
}
export default App;
//Article.js
import React, { useState } from "react";
import {
Button, Flex, Box, Input, Radio,
RadioGroup, Checkbox, Text, Textarea,
Select, Tooltip, FormControl, FormLabel,
Stack,
} from "@chakra-ui/react";
const Article = () => {
const [formData, setFormData] = useState({
firstName: "",
emailAddress: "",
gender: "female",
languages: [],
nationality: "",
address: "",
});
const handleInputChange = (field, value) => {
setFormData({
...formData,
[field]: value,
});
};
const handleLanguageCheckboxChange =
(language) => {
const languages =
formData.languages.includes(language)
? formData.languages
.filter((lang) => lang !== language)
: [...formData.languages, language];
setFormData({
...formData,
languages,
});
};
const handleSubmit =
() => {
console.log("Form Submitted:", formData);
alert("Form submitted successfully!");
setFormData({
firstName: "",
emailAddress: "",
gender: "female",
languages: [],
nationality: "",
address: "",
});
};
return (
<Box bg="lightgrey" w="100%" p={4}>
<Flex justifyContent="center">
<Flex
direction="column"
alignItems="center"
w={{ base: "90%", md: "70%", lg: "50%" }}>
<Text as="h2" fontWeight="bold">
Form Inputs by Chakra UI
</Text>
<FormControl isRequired>
<FormLabel>First name</FormLabel>
<Input
placeholder="First name"
onChange={
(e) =>
handleInputChange("firstName",
e.target.value)} />
</FormControl>
<FormControl>
<FormLabel>Email address</FormLabel>
<Tooltip
label="Enter your mail ID for notifications"
fontSize="0.7rem"
bgColor="#2F8D46"
>
<Input
placeholder="Enter mail ID for notifications "
size="md"
my="0.2rem"
onChange={(e) =>
handleInputChange("emailAddress",
e.target.value)
}
/>
</Tooltip>
</FormControl>
<FormControl>
<FormLabel>Choose your gender:</FormLabel>
<RadioGroup
defaultValue={formData.gender}
onChange={
(value) =>
handleInputChange("gender", value)
}>
<Stack spacing={5} direction="row">
<Radio colorScheme="red" value="male">
Male
</Radio>
<Radio colorScheme="green" value="female">
Female
</Radio>
</Stack>
</RadioGroup>
</FormControl>
<FormControl>
<FormLabel>Choose Language:</FormLabel>
<Stack spacing={5} direction="row">
<Checkbox
isChecked={formData.languages
.includes("English")}
onChange={
() => handleLanguageCheckboxChange("English")
}>
English
</Checkbox>
<Checkbox
isChecked={formData.languages.includes("Hindi")}
onChange={
() => handleLanguageCheckboxChange("Hindi")
}>
Hindi
</Checkbox>
</Stack>
</FormControl>
<FormControl>
<FormLabel>Choose your Nationality:</FormLabel>
<Select
placeholder="Select option"
onChange={
(e) =>
handleInputChange("nationality",
e.target.value)
}>
<option value="indian">
Indian
</option>
<option value="nepali">
Nepali
</option>
<option value="others">
Others
</option>
</Select>
</FormControl>
<FormControl>
<FormLabel>Address:</FormLabel>
<Textarea
placeholder="Enter your address"
onChange={
(e) => handleInputChange("address",
e.target.value)
} />
</FormControl>
<Button
variant="solid"
mt="5"
colorScheme="green"
size="md"
onClick={handleSubmit}>
Submit form
</Button>
</Flex>
</Flex>
</Box>
);
};
export default Article;
Step to run the application:
npm start
Output: Now go to http://localhost:3000 in your browser
Chakra UI Form Input
Similar Reads
Chakra UI Form Pin Input
Chakra UI provides various components for styling and making the React application more attractive and user-interactive. In the application, we need the functionality of Form Pin Input through which we can validate the OTP or some other authentication technique. In the UI appearance, we can create i
3 min read
Chakra UI Form
Forms are an integral part of web development, enabling users to interact with websites and applications seamlessly. However, crafting forms that are both functional and aesthetically pleasing can be a daunting task. This is where Chakra UI, a popular React component library, comes into play. With i
2 min read
Chakra UI Form Radio
Chakra UI Form Radio is a component of the Chakra UI library, a React component library for building customizable user interfaces. It provides a set of components and utilities to easily create radio buttons in forms, offering features like customizable colors, sizes, disabled states, and even the a
3 min read
Chakra UI Form Select
Chakra UI is a modern UI building library that comprises of many predefined customizable components. One of those components are 'Select'. Select component in Chakra UI allows an user to choose a value from a set of defined values. 'RadioGroup' does somewhat similar thing. However, In the case where
5 min read
Chakra UI Form Slider
Chakra UI Form Slider is the component, where users can make numerical value sections from a range of values. Sliders increase the interaction of users with the application. In real-time, we can embed this Chakra UI Form Slider component in the Shopping application, where users can filter out the it
4 min read
Blaze UI Input Forms
Blaze UI is an open-source CSS framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is avai
2 min read
React Chakra UI Form Number Input
React Chakra UI Form Number Input is a powerful and user-friendly component tailored for efficient numeric data entry in web applications. Built on the Chakra UI foundation, this component seamlessly integrates into React applications, providing developers with a simple yet customizable solution for
2 min read
Chakra UI Form Textarea
Chakra UI is a react library to create a website's UI components. Among the provided components, there is a component called `Textarea` which is used to take multiple line text inputs. PrerequisitesNPM and NodeReactHTML, CSS, and JavaScriptReact ChakraUIGiven below are the different approaches to us
4 min read
Chakra UI Form Button
Chakra UI Form Button is the component provided by the Chakra UI, which is an important component for user interaction and form submission. Buttons are the most integral elements of the application. These buttons are in various variants like size, color, icon, loading state, and many more. We can us
3 min read
Chakra UI Form Control
Chakra UI is a popular React component library that provides a set of customizable components for building user interfaces. In this article, we will talk about Chakra UI’s form control, a feature that simplifies the building and management of forms in web applications. Prerequisites:NPM & NodeJS
6 min read