React Bootstrap Textarea

React Textarea - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap textarea is an input dedicated for a large volume of text. It may be used in a variety of components like forms, comment sections and forums. Textareas don't have to be boring. They can be enhanced with colors, shadows or rounded corners.

Default textarea

Default styling for Bootstrap Textarea component

Basic textarea

Show code

        
            
        import React from "react";

        const TextareaPage = () => {
          return (
            <div className="form-group">
              <label htmlFor="exampleFormControlTextarea1">Basic textarea</label>
              <textarea
                className="form-control"
                id="exampleFormControlTextarea1"
                rows="5"
              />
            </div>
          );
        };
        
        export default TextareaPage;

Material textarea

Material Design styling for React Bootstrap Textarea

Material textarea

Show code

        
             
        import React from "react";
        import { MDBInput } from "mdbreact";
        
        const TextareaPage = () => {
          return <MDBInput type="textarea" label="Material textarea" rows="5" />;
        };
        
        export default TextareaPage;

Icon prefixes

You can add icons to your textarea. Just use prop icon with icon name.

Default textarea

Show code

        
             
        import React from "react";

        const TextareaPage = () => {
          return (
            <div className="input-group">
              <div className="input-group-prepend">
                <span className="input-group-text" id="basic-addon">
                  <i className="fas fa-pencil-alt prefix"></i>
                </span>
              </div>
              <textarea
                className="form-control"
                id="exampleFormControlTextarea1"
                rows="5"
              ></textarea>
            </div>
          );
        };
        
        export default TextareaPage;

Material input

Icon Prefix

Show code

        
             
        import React from "react";
        import { MDBInput } from "mdbreact";
        
        const TextareaPage = () => {
          return (
            <MDBInput type="textarea" label="Icon Prefix" rows="2" icon="pencil-alt" />
          );
        };
        
        export default TextareaPage;

React Textarea - API

In this section you will find advanced information about the React Textarea component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Import statement

In order to use Textarea component make sure you have imported proper module first.

Show code

javascript

        
            
          import React from 'react';
          import { MDBInput } from 'mdbreact';

API Reference: Properties

The table below shows the configuration options of the MDBInput component.

Name	Type	Default	Description	Example
`checked`	Boolean	`false`	Pre-selects checkbox/radio button when the page loads.	`<MDBInput checked />`
`className`	String		Adds custom class to Input component	`<MDBInput className="myClass" />`
`containerClass`	String		Adds custom class to wrapping div	`<MDBInput containerClass="wrapper" />`
`disabled`	Boolean	`false`	Disables input component	`<MDBInput disabled />`
`error`	String		Sets the error message for the labels `data-error` attribute	`<MDBInput error="Whoops!" />`
`filled`	Boolean	`false`	Add filled-in style to checkbox/radio button	`<MDBInput type="checkbox" filled />`
`gap`	Boolean	`false`	Creates gap inside checkbox/radio button	`<MDBInput type="checkbox" gap />`
`group`	Boolean	`false`	Add .form-group class to the wrapping div	`<MDBInput group />`
`hint`	String		Sets the placeholder for the Input	`<MDBInput hint="Placeholder" />`
`icon`	String		Adds font-awesome icon	`<MDBInput icon="caret-right" />`
`iconBrand`	Boolean	`false`	Use this property to set brand icon (`fab`)	`<MDBInput icon="twitter" iconBrand />`
`iconClassName`	String		Adds custom classes to icon element	`<MDBInput icon="envelope" iconClassName="customClass" />`
`iconLight`	Boolean	`false`	Use this property to set light icon (`fal`)	`<MDBInput icon="twitter" iconLight />`
`iconRegular`	Boolean	`false`	Use this property to set regular icon (`far`)	`<MDBInput icon="twitter" iconRegular />`
`iconSize`	String		Sets icon size	`<MDBInput icon="pencil-alt" size="5x" />`
`id`	String		Required! Set the id of the input element	`<MDBInput id="myId" />`
`inputRef`	Function		Allows to attach React Ref to the input component; accepts only Callback Ref	`<MDBInput inputRef={ref => this.myRef = ref } />`
`label`	String		Add label to the component; you can attach jsx elements (f.e. links)	`<MDBInput label="My custom input" />`
`labelClass`	String		Adds custom class to the label	`<MDBInput labelClass="labelCustomClass" />`
`size`	String		Changes size of the component; available `lg` and `sm`	`<MDBInput size="sm" />`
`success`	String		Sets the success message for the labels `data-success` attribute	`<MDBInput success="Yeah!" />`
`tag`	String	`input`	Changes default input tag	`<MDBInput tag="div" />`
`type`	String	`text`	The type of the input element	`<MDBInput type="checkbox" />`
`validate`	Boolean	`false`	Adds .validate class to the Input component	`<MDBInput validate />`
`value`	String		The value of the input element (use with the controlled input)	`<MDBInput value="I am controlled" onChange={this.handleChange} />`
`valueDefault`	String		The default value of the input (use with the uncontrolled input)	`<MDBInput valueDefault="I am uncontrolled" />`

API Reference: Methods

The table below shows the methods which you can use with MDBInput component.

Name	Description	Example
`getValue`	Method called on input change event; returns input value	`<MDBInput getValue={this.getValue} />`
`onBlur`	Method called on blur event, the blur event is raised when an element loses focus; returns event object	`<MDBInput onBlur={this.handleBlur} />`
`onChange`	Method called on change event; returns event object	`<MDBInput onChange={this.handleChange} />`
`onFocus`	Method called on focus event, the focus event is raised when the user sets focus on en element; returns event object	`<MDBInput onFocus={this.handleFocus} />`
`onInput`	Method called on input event; returns event object	`<MDBInput onInput={this.handleInput} />`

React Textarea - examples & customization

Quickly get a project started with any of our examples.

A form within a card

Show code

        
            
          import React from "react";
          import { MDBCol, MDBInput, MDBBtn, MDBCard, MDBCardBody } from "mdbreact";

          const TextareaPage = () => {
            return (
              <MDBCol md="4">
                <MDBCard>
                  <MDBCardBody>
                    <form>
                      <p className="h4 text-center py-4">Sign up</p>
                      <div className="grey-text">
                        <MDBInput
                          label="Your name"
                          icon="user"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                        />
                        <MDBInput
                          label="Your email"
                          icon="envelope"
                          group
                          type="email"
                          validate
                          error="wrong"
                          success="right"
                        />
                        <MDBInput type="textarea" rows="2" label="Your message" icon="pencil-alt"/>
                      </div>
                      <div className="text-center py-4 mt-3">
                        <MDBBtn color="cyan" type="submit">
                          Send Message
                        </MDBBtn>
                      </div>
                    </form>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            );
          }

          export default TextareaPage;

Introduction
Form within card