Rate this docs

React Bootstrap textarea

React Textarea - Bootstrap 4 & Material Design

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


              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



              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


                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="fa fa-pencil prefix"></i>
                                </span>
                            </div>
                            <textarea className="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
                        </div>
                    )
                }

                export default TextareaPage;
            

Material input



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

              const TextareaPage = () => {
                  return (
                      <MDBInput
                        type="textarea"
                        label="Icon Prefix"
                        rows="2"
                        icon="pencil"
                      />
                  )
              }

              export default TextareaPage;
          

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


        import { MDBInput } from 'mdbreact';
      

API Reference: Properties

Name Type Default Description Example
className String Adds custom class to the textarea element <MDBInput className="myClass" ... />
containerClass String Adds custom class to the wraping div <MDBInput containerClass="myClass" ... />
default String Adds default value to the textarea <MDBInput default="My default text" ... />
disabled Boolean false Disables input component <MDBInput disabled ... />
error String Specifies an error message <MDBInput error="Bruh, that this field is required" ... />
group Boolean Adds .form-group class to the wrapping div to add some structure to forms. <MDBInput group ... />
hint String Adds placeholder text <MDBInput hint="My hint..." ... />
icon String Adds icon on the left side of the input <MDBInput icon="pencil" ... />
iconClass String Adds custom class to the icon element <MDBInput iconClass="red-text" ... />
id String The id of the input element <MDBInput id="uniqueId" ... />
label String Add description to the component label <MDBInput label="Example label" ... />
labelClass String Adds custom class to the component's label <MDBInput labelClass="myLabelClass" ... />
size String Sizes form controls for a more consistent rendering. Choose from: lg | sm <MDBInput size="lg" ... />
success String Specifies an success message <MDBInput success="Looks ok!" ... />
type String textarea Sets the input type to textarea. Required. <MDBInput type="textarea" ... />
value String Sets the inputr value <MDBInput type="textarea" ... />

API Reference: Methods

Name Parameters Description Example
getValue Returns input value, on onChange event. <MDBInput getValue={this.fileInputHandler} />

Textarea - examples & customization

Quickly get a project started with any of our examples.


A form within a card

Sign up


          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"/>
                      </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;