Textarea

React Bootstrap Textarea input free examples, templates & tutorial

Responsive React Textarea with Bootstrap 5. How to change textarea height, size, width and style. Examples of textarea editor, comment, contact form, checkout & chat.


Chat

Message textarea inside of a chat UI.

  • avatar

    Brad Pitt

    12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft

    13 mins ago

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    avatar
  • avatar

    Brad Pitt

    10 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        
            
                import React from 'react';
                import { 
                  MDBContainer, 
                  MDBCol, 
                  MDBRow,
                  MDBTextArea,
                  MDBBtn,
                  MDBCardBody,
                  MDBCardHeader,
                  MDBCard,
                  MDBBadge,
                  MDBIcon
                } from 'mdb-react-ui-kit';
        
                export default function App() {
                  return (
                    <section className='gradient-custom'>
                      <MDBContainer className='py-5'>
                        <MDBRow>
                          <MDBCol md='6' lg='5' xl='5' className='mb-4 mb-md-0'>
                            <h5 className='font-weight-bold mb-3 text-center text-white'>Member</h5>
          
                            <MDBCard className='mask-custom'>
                              <MDBCardBody>
                                <ul className='list-unstyled mb-0'>
                                  <li
                                    className='p-2 border-bottom'
                                    style={{
                                      borderBottom: '1px solid rgba(255, 255, 255, 0.3)',
                                    }}
                                  >
                                    <a href='#!' className='d-flex justify-content-between link-light'>
                                      <div className='d-flex flex-row'>
                                        <img
                                          src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp'
                                          alt='avatar'
                                          className='
                                    rounded-circle
                                    d-flex
                                    align-self-center
                                    me-3
                                    shadow-1-strong
                                  '
                                          width='60'
                                        />
                                        <div className='pt-1'>
                                          <p className='fw-bold mb-0'>John Doe</p>
                                          <p className='small text-white'>Hello, Are you there?</p>
                                        </div>
                                      </div>
                                      <div className='pt-1'>
                                        <p className='small text-white mb-1'>Just now</p>
                                        <MDBBadge color='danger' className='float-end'>
                                          1
                                        </MDBBadge>
                                      </div>
                                    </a>
                                  </li>
                                  <li
                                    className='p-2 border-bottom'
                                    style={{
                                      borderBottom: '1px solid rgba(255, 255, 255, 0.3)',
                                    }}
                                  >
                                    <a href='#!' className='d-flex justify-content-between link-light'>
                                      <div className='d-flex flex-row'>
                                        <img
                                          src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp'
                                          alt='avatar'
                                          className='
                                    rounded-circle
                                    d-flex
                                    align-self-center
                                    me-3
                                    shadow-1-strong
                                  '
                                          width='60'
                                        />
                                        <div className='pt-1'>
                                          <p className='fw-bold mb-0'>Danny Smith</p>
                                          <p className='small text-white'>Lorem ipsum dolor sit.</p>
                                        </div>
                                      </div>
                                      <div className='pt-1'>
                                        <p className='small text-white mb-1'>5 mins ago</p>
                                      </div>
                                    </a>
                                  </li>
                                  <li
                                    className='p-2 border-bottom'
                                    style={{
                                      borderBottom: '1px solid rgba(255, 255, 255, 0.3) ',
                                    }}
                                  >
                                    <a href='#!' className='d-flex justify-content-between link-light'>
                                      <div className='d-flex flex-row'>
                                        <img
                                          src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp'
                                          alt='avatar'
                                          className='
                                    rounded-circle
                                    d-flex
                                    align-self-center
                                    me-3
                                    shadow-1-strong
                                  '
                                          width='60'
                                        />
                                        <div className='pt-1'>
                                          <p className='fw-bold mb-0'>Alex Steward</p>
                                          <p className='small text-white'>Lorem ipsum dolor sit.</p>
                                        </div>
                                      </div>
                                      <div className='pt-1'>
                                        <p className='small text-white mb-1'>Yesterday</p>
                                      </div>
                                    </a>
                                  </li>
                                  <li
                                    className='p-2 border-bottom'
                                    style={{
                                      borderBottom: '1px solid rgba(255, 255, 255, 0.3) ',
                                    }}
                                  >
                                    <a href='#!' className='d-flex justify-content-between link-light'>
                                      <div className='d-flex flex-row'>
                                        <img
                                          src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp'
                                          alt='avatar'
                                          className='
                                    rounded-circle
                                    d-flex
                                    align-self-center
                                    me-3
                                    shadow-1-strong
                                  '
                                          width='60'
                                        />
                                        <div className='pt-1'>
                                          <p className='fw-bold mb-0'>Ashley Olsen</p>
                                          <p className='small text-white'>Lorem ipsum dolor sit.</p>
                                        </div>
                                      </div>
                                      <div className='pt-1'>
                                        <p className='small text-white mb-1'>Yesterday</p>
                                      </div>
                                    </a>
                                  </li>
                                  <li
                                    className='p-2 border-bottom'
                                    style={{
                                      borderBottom: '1px solid rgba(255, 255, 255, 0.3) ',
                                    }}
                                  >
                                    <a href='#!' className='d-flex justify-content-between link-light'>
                                      <div className='d-flex flex-row'>
                                        <img
                                          src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp'
                                          alt='avatar'
                                          className='
                                    rounded-circle
                                    d-flex
                                    align-self-center
                                    me-3
                                    shadow-1-strong
                                  '
                                          width='60'
                                        />
                                        <div className='pt-1'>
                                          <p className='fw-bold mb-0'>Kate Moss</p>
                                          <p className='small text-white'>Lorem ipsum dolor sit.</p>
                                        </div>
                                      </div>
                                      <div className='pt-1'>
                                        <p className='small text-white mb-1'>Yesterday</p>
                                      </div>
                                    </a>
                                  </li>
                                  <li
                                    className='p-2 border-bottom'
                                    style={{
                                      borderBottom: '1px solid rgba(255, 255, 255, 0.3) ',
                                    }}
                                  >
                                    <a href='#!' className='d-flex justify-content-between link-light'>
                                      <div className='d-flex flex-row'>
                                        <img
                                          src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp'
                                          alt='avatar'
                                          className='
                                    rounded-circle
                                    d-flex
                                    align-self-center
                                    me-3
                                    shadow-1-strong
                                  '
                                          width='60'
                                        />
                                        <div className='pt-1'>
                                          <p className='fw-bold mb-0'>Lara Croft</p>
                                          <p className='small text-white'>Lorem ipsum dolor sit.</p>
                                        </div>
                                      </div>
                                      <div className='pt-1'>
                                        <p className='small text-white mb-1'>Yesterday</p>
                                      </div>
                                    </a>
                                  </li>
                                  <li className='p-2'>
                                    <a href='#!' className='d-flex justify-content-between link-light'>
                                      <div className='d-flex flex-row'>
                                        <img
                                          src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp'
                                          alt='avatar'
                                          className='
                                    rounded-circle
                                    d-flex
                                    align-self-center
                                    me-3
                                    shadow-1-strong
                                  '
                                          width='60'
                                        />
                                        <div className='pt-1'>
                                          <p className='fw-bold mb-0'>Brad Pitt</p>
                                          <p className='small text-white'>Lorem ipsum dolor sit.</p>
                                        </div>
                                      </div>
                                      <div className='pt-1'>
                                        <p className='small text-white mb-1'>5 mins ago</p>
                                        <span className='text-white float-end'>
                                          <i className='fas fa-check' aria-hidden='true'></i>
                                        </span>
                                      </div>
                                    </a>
                                  </li>
                                </ul>
                              </MDBCardBody>
                            </MDBCard>
                          </MDBCol>
          
                          <MDBCol md='6' lg='7' xl='7'>
                            <ul className='list-unstyled text-white'>
                              <li className='d-flex justify-content-between mb-4'>
                                <img
                                  src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp'
                                  alt='avatar'
                                  className='
                            rounded-circle
                            d-flex
                            align-self-start
                            me-3
                            shadow-1-strong
                          '
                                  width='60'
                                />
                                <MDBCard className='mask-custom'>
                                  <MDBCardHeader
                                    className='d-flex justify-content-between p-3'
                                    style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3)' }}
                                  >
                                    <p className='fw-bold mb-0'>Brad Pitt</p>
                                    <p className='text-light small mb-0'>
                                      <MDBIcon far icon='clock' /> 12 mins ago
                                    </p>
                                  </MDBCardHeader>
                                  <MDBCardBody>
                                    <p className='mb-0'>
                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                                      labore et dolore magna aliqua.
                                    </p>
                                  </MDBCardBody>
                                </MDBCard>
                              </li>
                              <li className='d-flex justify-content-between mb-4'>
                                <MDBCard className='mask-custom w-100'>
                                  <MDBCardHeader
                                    className='d-flex justify-content-between p-3'
                                    style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3)' }}
                                  >
                                    <p className='fw-bold mb-0'>Lara Croft</p>
                                    <p className='text-light small mb-0'>
                                      <MDBIcon far icon='clock' /> 13 mins ago
                                    </p>
                                  </MDBCardHeader>
                                  <MDBCardBody>
                                    <p className='mb-0'>
                                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                      laudantium.
                                    </p>
                                  </MDBCardBody>
                                </MDBCard>
                                <img
                                  src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp'
                                  alt='avatar'
                                  className='
                            rounded-circle
                            d-flex
                            align-self-start
                            ms-3
                            shadow-1-strong
                          '
                                  width='60'
                                />
                              </li>
                              <li className='d-flex justify-content-between mb-4'>
                                <img
                                  src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp'
                                  alt='avatar'
                                  className='
                            rounded-circle
                            d-flex
                            align-self-start
                            me-3
                            shadow-1-strong
                          '
                                  width='60'
                                />
                                <MDBCard className='mask-custom'>
                                  <MDBCardHeader
                                    className='d-flex justify-content-between p-3'
                                    style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3)' }}
                                  >
                                    <p className='fw-bold mb-0'>Brad Pitt</p>
                                    <p className='text-light small mb-0'>
                                      <MDBIcon far icon='clock' /> 10 mins ago
                                    </p>
                                  </MDBCardHeader>
                                  <MDBCardBody>
                                    <p className='mb-0'>
                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                                      labore et dolore magna aliqua.
                                    </p>
                                  </MDBCardBody>
                                </MDBCard>
                              </li>
                              <li className='mb-3'>
                                <MDBTextArea contrast id='textAreaExample' label='message' rows={4}></MDBTextArea>
                              </li>
                              <MDBBtn color='light' rounded className='float-end'>
                                {' '}
                                Send{' '}
                              </MDBBtn>
                            </ul>
                          </MDBCol>
                        </MDBRow>
                      </MDBContainer>
                    </section>
                  );
                }
              
        
    
        
            
                .gradient-custom {
                  /* fallback for old browsers */
                  background: #fccb90;
                
                  /* Chrome 10-25, Safari 5.1-6 */
                  background: -webkit-linear-gradient(
                    to bottom right,
                    rgba(252, 203, 144, 1),
                    rgba(213, 126, 235, 1)
                  );
                
                  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                  background: linear-gradient(
                    to bottom right,
                    rgba(252, 203, 144, 1),
                    rgba(213, 126, 235, 1)
                  );
                }
                
                .mask-custom {
                  background: rgba(24, 24, 16, 0.2);
                  border-radius: 2em;
                  backdrop-filter: blur(15px);
                  border: 2px solid rgba(255, 255, 255, 0.05);
                  background-clip: padding-box;
                  box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
                }