Chakra UI Form Input

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:

• NPM & Node.js
• React
• ReactJS Chakra UI

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;

Javascript

//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