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:
Below are the different approaches that we have discussed for creating Form Controls in Chakra UI.
Table of Content
- Basic Form
- Form With Checkbox
- Form with Error Message
- Form with Number Input
- Form with Required Field
- Form with Select
Approach 1: Basic Form
The most basic idea to implement Chakra UI’s form involves Chakra’s components like ‘FormControl’, ‘FormLabel’, and‘Input’. These built-in components help create a simple form.
Syntax:
<FormControl>
<FormLabel>Email address</FormLabel>
<Input
type="email"
name="email"
/>
</FormControl>
Approach 2: Form With Checkbox
You can also implement several checkboxes to select from; using the ‘Radio’ component provided; wrapped inside ‘HStack’ component. The entire things will be further wrapped inside a ‘RadioGroup’ component.
<FormControl>
<FormLabel>Favourite Tech</FormLabel>
<RadioGroup>
<HStack spacing="24px">
<Radio value="Reactjs">Reactjs</Radio>
<Radio value="Nextjs">Nextjs</Radio>
<Radio value="Expressjs">Expressjs</Radio>
</HStack>
</RadioGroup>
</FormControl>
Approach 3: Form with Error Message
In this approach Chakra UI helps you implement form validation. It displays a form validation message by using ‘FormErrorMessage’ component along the ‘Input’.
Syntax:
<FormControl isInvalid={isError}>
<Input type='email'/>
{!isError ? (
<></>
) : (
<FormErrorMessage>Email is required.</FormErrorMessage>
)}
</FormControl>
Approach 4: Form with Number Input
Chakra UI also provides input of numbers only through ‘NumberInput’ and ‘NumberInputField’. It also provides increment and decrement button through ‘NumberIncrementStepper’ and ‘NumberDecrementStepper’ wrapped inside ‘NumberInputStepper’
Syntax:
<FormControl>
<FormLabel>Amount</FormLabel>
<NumberInput max={50} min={10}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</FormControl>
Approach 5: Form with Required Field
Chakra UI also makes it easy to implement required fields using ‘FormLabel’ with an asterisk by using isRequired props.
Syntax:
<FormControl isRequired>
<FormLabel>First name</FormLabel>
<Input
name="firstName"
placeholder="First name"
/>
</FormControl>
Approach 6: Form with Select
Chakra UI also makes it easy to make a field with predefined set of options. You can use ‘Select’ component used by Chakra UI.
Syntax:
<FormControl>
<Select placeholder="Select States">
<option>Rajsthan</option>
<option>Uttrakhand</option>
</Select>
</FormControl>
Steps to Create React App and Installing Module
Step 1: Create React app by using the command provided below:
npx create-react-app my-react-app
Enter the app using the following the command:
cd my-react-app
Step 2: Install the Chakra UI dependencies by running the following command:
npm i @chakra-ui/react
Project Structure:
The updated dependencies should look like the one provided below. Open package.json and verify the following.
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Below is the example to show the Form Control.
Javascript
import React, { useState } from "react" ; import { FormControl, FormLabel, Input, FormHelperText } from "@chakra-ui/react" ; const MyForm = () => { // State to hold the form data const [formData, setFormData] = useState({ email: "" , }); // Function to handle form submission const handleSubmit = (e) => { e.preventDefault(); console.log( "Form Data:" , formData); }; // Function to handle input changes const handleInputChange = (e) => { const { name, value } = e.target; setFormData((prevData) => ({ ...prevData, [name]: value, })); }; return ( <div> <form onSubmit={handleSubmit}> <FormControl> <FormLabel> Email address </FormLabel> <Input type= "email" name= "email" value={formData.email} onChange={handleInputChange} /> <FormHelperText> We'll never share your email. </FormHelperText> </FormControl> <button className= "btn" type= "submit" >Submit</button> </form> </div> ); }; export default MyForm; |
Javascript
import React, { useState } from "react" ; import { FormControl, FormLabel, Radio, RadioGroup, HStack, } from "@chakra-ui/react" ; const MyFormWithCheckbox = () => { // State to hold the selected character const [selectedCharacter, setSelectedCharacter] = useState( "Itachi" ); // Function to handle form submission const handleSubmit = (e) => { e.preventDefault(); console.log( "Selected Character:" , selectedCharacter); }; return ( <div> <form onSubmit={handleSubmit}> <FormControl> <FormLabel>Favourite Tech</FormLabel> <RadioGroup onChange={(value) => setSelectedCharacter(value)} > <HStack spacing= "24px" > <Radio value= "Reactjs" >Reactjs</Radio> <Radio value= "Nextjs" >Nextjs</Radio> <Radio value= "Expressjs" >Expressjs</Radio> </HStack> </RadioGroup> <button className= "btn" type= "submit" >Submit</button> </FormControl> </form> </div> ); }; export default MyFormWithCheckbox; |
Javascript
import React, { useState } from "react" ; import { FormControl, FormLabel, Input, FormErrorMessage } from "@chakra-ui/react" ; function MyFormWithErrorMsg() { // State to hold the input value const [input, setInput] = useState( '' ); // Function to handle input changes const handleInputChange = (e) => setInput(e.target.value); // Function to handle form submission const handleSubmit = (e) => { e.preventDefault(); console.log( "Form Data:" , { email: input }); }; // Check if input is empty for error validation const isError = input === '' ; return ( <form onSubmit={handleSubmit}> <FormControl isInvalid={isError}> <FormLabel>Email</FormLabel> <Input type= 'email' value={input} onChange={handleInputChange} /> {!isError ? ( <></> ) : ( // Display error message when input is empty <FormErrorMessage> Email is required. </FormErrorMessage> )} </FormControl> <button className= "btn" type= "submit" >Submit</button> </form> ); } export default MyFormWithErrorMsg; |
Javascript
import React, { useState } from "react" ; import { FormControl, FormLabel, NumberInput, NumberInputStepper, NumberIncrementStepper, NumberInputField, NumberDecrementStepper } from "@chakra-ui/react" ; const MyFormWithNumberInput = () => { // State to hold the entered amount const [enteredAmount, setEnteredAmount] = useState(10); // Function to handle number input changes const handleAmountChange = (value) => { setEnteredAmount(value); }; // Function to handle form submission const handleSubmit = (e) => { e.preventDefault(); console.log( "Entered Amount:" , enteredAmount); }; return ( <form onSubmit={handleSubmit}> <FormControl> <FormLabel>Amount</FormLabel> <NumberInput max={50} min={10} value={enteredAmount} onChange={handleAmountChange}> <NumberInputField /> <NumberInputStepper> <NumberIncrementStepper /> <NumberDecrementStepper /> </NumberInputStepper> </NumberInput> </FormControl> <button type= "submit" >Submit</button> </form> ); }; export default MyFormWithNumberInput; |
Javascript
import React, { useState } from "react" ; import { FormControl, FormLabel, Input } from "@chakra-ui/react" ; const MyFormWithRequiredField = () => { // State to hold the form data const [formData, setFormData] = useState({ firstName: "" , }); // Function to handle input changes const handleInputChange = (e) => { const { name, value } = e.target; setFormData((prevData) => ({ ...prevData, [name]: value, })); }; // Function to handle form submission const handleSubmit = (e) => { e.preventDefault(); console.log( "Form Data:" , formData); }; return ( <form onSubmit={handleSubmit}> <FormControl isRequired> <FormLabel>First name</FormLabel> <Input name= "firstName" placeholder= "First name" value={formData.firstName} onChange={handleInputChange} /> </FormControl> <button className= "btn" type= "submit" >Submit </button> </form> ); }; export default MyFormWithRequiredField; |
Javascript
import React, { useState } from "react" ; import { FormControl, Select } from "@chakra-ui/react" ; const MyFormWithSelect = () => { // State to hold the selected country const [selectedCountry, setSelectedCountry] = useState( "" ); // Function to handle select changes const handleSelectChange = (e) => { setSelectedCountry(e.target.value); }; // Function to handle form submission const handleSubmit = (e) => { e.preventDefault(); console.log( "Selected Country:" , selectedCountry); }; return ( <form onSubmit={handleSubmit}> <FormControl> <Select placeholder= "Select States" value={selectedCountry} onChange={handleSelectChange} > <option>Rajsthan</option> <option>Uttrakhand</option> </Select> </FormControl> <button className= "btn" type= "submit" >Submit</button> </form> ); }; export default MyFormWithSelect; |
Javascript
import "./App.css" ; import MyForm from "./components/MyForm" ; import MyFormWithCheckbox from "./components/MyFormWithCheckbox" ; import MyFormWithErrorMsg from "./components/MyFormWithErrorMsg" ; import MyFormWithNumberInput from "./components/MyFormWithNumberInput" ; import MyFormWithRequiredField from "./components/MyFormWithRequiredField" ; import MyFormWithSelect from "./components/MyFormWithSelect" ; function App() { return ( <div className= "base" > <div className= "app" ><MyForm /></div> <div className= "app" ><MyFormWithCheckbox /></div> <div className= "app" ><MyFormWithErrorMsg /></div> <div className= "app" ><MyFormWithRequiredField /></div> <div className= "app" ><MyFormWithSelect /></div> <div className= "app" ><MyFormWithNumberInput /></div> </div> ); } export default App; |
Javascript
import React from 'react' ; import ReactDOM from 'react-dom/client' ; import './index.css' ; import App from './App' ; import { ChakraProvider } from '@chakra-ui/react' ; const root = ReactDOM.createRoot(document.getElementById( 'root' )); root.render( <ChakraProvider> <App /> </ChakraProvider> ); |
CSS
.base { margin : 20px ; } .app { max-width : 800px ; margin : auto ; padding : 20px ; border : 2px solid gray ; border-radius: 20px ; margin-top : 6px ; } .btn { border-radius: 10px ; padding : 6px 12px ; margin-top : 20px ; background-color : skyblue; } .btn:hover { background-color : white ; color : black ; border : 1px solid black ; } |
Start your application using the following command:
npm start
Output:
Contact Us