,Creating Chakra UI Form Control Component
Implementing Chakra UI Form Control Component and Toast using Tailwind CSS to display the text in the toast. Create FormExample.jsx and create a form layout by importing Flex, FormControl, FormLabel, Input, useToast
- Flex: Just like Box but with display as flex.
- FormControl: Provides functionalities and context to its children.
- FormLabel: Just like HTML label used for form label.
- Input: Input component for user input.
- useToast: Create a toast component.
To implement this we use the useState react hooks to store the input values and then use them in the toast components to display the value in the toast
Example: Here we are using the above-explained approach.
import FormExample.jsx in the App.jsx
Javascript
//FormExample.jsx import { Box, Button, Flex, FormControl, FormLabel, Input, Text, useToast, } from "@chakra-ui/react"; import React from "react"; import { useState } from "react"; const FormExample = () => { const toast = useToast(); const [email, setEmail] = useState(""); const [name, setName] = useState(""); const [subject, setSubject] = useState(""); return ( <Box className="col-span-3 w-full h-auto shadow-gray-400 border shadow-xl rounded-xl lg:p-4"> <Box className="p-4"> <Text className="text-center text-3xl text-semibold text-blue-700"> GFG Form Using ChakraUI and Tailwind </Text> <Box className="grid md:grid-cols-2 gap-4 w-full py-6"> <Flex className="flex-col py-2"> <FormControl> <FormLabel> Email address </FormLabel> <Input type="email" onChange={(e) => { setEmail(e.target.value); }} /> </FormControl> </Flex> <Flex flexDirection={"column"} className="py-2"> <FormControl> <FormLabel> Your Name </FormLabel> <Input type="text" onChange={(e) => { setName(e.target.value); }} /> </FormControl> </Flex> </Box> <Flex flexDirection={"column"} className="py-2"> <FormControl w="full"> <FormLabel> Subject </FormLabel> <Input type="text" onChange={(e) => { setSubject(e.target.value); }} /> </FormControl> </Flex> <Button loadingText="Submitting" color="teal" bg="darkred" variant="solid" className="p-2 w-full" onClick={() => toast({ title: "GFG says", description: `${email} ${name} ${subject}`, status: "success", position: "top", duration: 9000, isClosable: true, }) } > Submit </Button> </Box> </Box> ); }; export default FormExample; |
Javascript
// App.jsx import "./App.css"; import FormExample from "./FormExample"; function App() { return ( <div className="bg-black shadow-xl text-white relative flex flex-row justify-center items-center h-screen w-full"> <FormExample /> </div> ); } export default App; |
To run the project enter the following command in Terminal.
npm start
Note: then go to the http://localhost:3000
Output:
It is Possible to Mix Chakra UI with Tailwind CSS ?
Yes, it is possible to mix Chakra UI with Tailwind CSS. In this article, we are going to learn about mixing Chakra UI with Tailwind CSS. Chakra UI is a component-based open-source frontend framework for ReactJS. It is a simple, easy, and modular component library to build React Applications made by Segun Adebayo. Chakra UI is used by millions of users and can be easily configured and extended. Tailwind CSS is an inline CSS based library to build a modern website without creating separate files for styling. Therefore we use both of them together for web designing.
Mixing Chakra UI with Tailwind CSS allows combining the component library and theming capabilities of Chakra UI with the utility-first approach and responsive design features of Tailwind CSS to create visually appealing and highly functional user interfaces with a blend of both frameworks’ strengths. Here we are using two common approaches to perform mixing chakra UI with Tailwind CSS.
- Creating Chakra UI Card Component
- Creating Chakra UI Form Control Component