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.
Prerequisites
Given below are the different approaches to using the Chakra Textarea component discussed in this article.
Table of Content
- 1: Basic Textarea
- 2: Controlled Textarea
- 3: Resizing the behavior of the textarea
- 4: Disabled Textarea
- 5: Invalid Textarea
Approach 1: Basic Textarea:
The basic textarea provided in Chakra UI has no special behavior. It’s like the normal textarea input fields and it’s the easiest way to implement the textarea.
Syntax:
function MyForm() {
return (
<Textarea placeholder="Enter your text" />
);
}
Approach 2: Controlled Textarea:
Controlled textarea provides the feature of managing the value inside the textarea through state. That means, you can explicitly update the value of the textarea on each user input.
Syntax:
function MyForm() {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<Textarea value={value}
onChange={handleChange}
placeholder="Enter your text" />
);
}
Approach 3: Resizing the behavior of the textarea:
In this approach of using the textarea, we can provide a `resize` prop to the component to change the behavior of textarea expanding. (horizontal or vertical)
Syntax:
function MyForm() {
return (
<Textarea resize="horizontal/vertical" placeholder="Enter your text" />
);
}
Approach 4: Disabled textarea:
Disabled textarea prevents user input into the textarea field. This is helpful in case of conditional prevention for using the textarea.
Syntax:
function MyForm() {
return (
<Textarea disabled placeholder="Enter your text" />
);
}
Approach 5: Invalid Textarea:
This approach of using the textarea allows us to provide indication on user inputs provided is valid or not.
Syntax:
function MyForm() {
return (
<Textarea isInvalid placeholder="Enter your text" />
);
}
Steps to create a React app and installing the modules:
Step 1: Create a React app and enter into it by using the following commands:
npx create-react-app my-react-app
cd my-react-app
Step 2: Install ChakraUI dependency by using the following command:
npm i @chakra-ui/react
Project Structure:
The updated dependencies in package.json file will look like:
"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: Given below are the examples of different approaches of using a textarea.
Javascript
// Basic.js import React, { useState } from 'react' ; import { Textarea, Button } from '@chakra-ui/react' ; function Basic() { const [value, setValue] = useState( '' ); const handleChange = (event) => { setValue(event.target.value); }; const handleSubmit = () => { console.log( "Data entered:" , value); }; return ( <> <p>Basic</p> <Textarea value={value} onChange={handleChange} placeholder= "Enter your text" /> <Button color={ "white" } padding={ "8px" } border={ "none" } background={ "teal" } onClick={handleSubmit}> Submit </Button> </> ); } export default Basic; |
Javascript
// Controlled.js import React, { useState } from 'react' ; import { Textarea, Button } from '@chakra-ui/react' ; function Controlled() { const [value, setValue] = useState( '' ); const handleChange = (event) => { setValue(event.target.value); }; const handleSubmit = () => { console.log( "Data entered:" , value); }; return ( <> <p>Controlled</p> <Textarea value={value} onChange={handleChange} placeholder= "Enter your text" /> <Button color={ "white" } padding={ "8px" } border={ "none" } background={ "green" } onClick={handleSubmit} > Submit </Button> </> ); } export default Controlled; |
Javascript
// Disabled.js import React from 'react' ; import { Textarea } from '@chakra-ui/react' ; function Disabled() { return ( <> <p>Disabled</p> <Textarea disabled placeholder= "Enter your text" /> </> ); } export default Disabled; |
Javascript
// Invalid.js import React, { useState } from 'react' ; import { Textarea, Button, Alert } from '@chakra-ui/react' ; function Invalid() { const [value, setValue] = useState( '' ); // Assume initially it's invalid const [isValid, setIsValid] = useState( false ); const handleChange = (event) => { setValue(event.target.value); // Perform validation here // Invalid if the input is empty setIsValid(event.target.value.length > 0); }; const handleSubmit = () => { if (isValid) { console.log( "Data entered:" , value); } else { console.log( "Form is invalid. Cannot submit." ); } }; return ( <> <p>Invalid</p> <Textarea value={value} onChange={handleChange} placeholder= "Enter your text" border={ !isValid && "3px solid red" } borderColor={isValid ? undefined : "red" } /> <Button color={ "white" } padding={ "8px" } border={ "none" } background={ "crimson" } colorScheme='teal ' size=' md ' onClick={handleSubmit}> Submit </Button> {!isValid && ( <Alert color={' red'} status= "error" borderRadius= "md" > Please enter valid text. </Alert> )} </> ); } export default Invalid; |
Javascript
// Resize.js import React from 'react' ; import { Textarea } from '@chakra-ui/react' ; function Resize() { return ( <> <p>Resize Vertical</p> <Textarea resize= "vertical" placeholder= "Enter your text" /> </> ); } export default Resize; |
Javascript
// App.js import logo from './logo.svg' ; import './App.css' ; import Basic from './components/Basic' ; import Controlled from './components/Controlled' ; import Disabled from './components/Disabled' ; import Invalid from './components/Invalid' ; import Resize from './components/Resize' ; function App() { return ( <div className= "App" style={{ display: "flex" , flexDirection: "column" , maxWidth: "400px" , gap: "12px" , margin: "auto" , padding: "40px" }}> <Basic /> <Resize /> <Controlled /> <Disabled /> <Invalid /> </div> ); } export default App; |
Step to start your application with the help of the command provided below:
npm start
Output:
Contact Us