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:
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" > w3wiki - 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