React Textarea - Flowbite

Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants

The <Textarea> component is a multi-line text field input that can be used to receive longer chuncks of text from the user in the form of a comment box, description field, and more.

From the examples on this page you will find multiple styles and variants of the <Textarea> component coded with the utility classes from Tailwind CSS including a WYSIWYG editor, comment box, chatroom textarea, all available in dark mode as well.

To start using the component make sure that you have imported it from Flowbite React:

'use client';

import { Textarea } from 'flowbite-react';

Table of Contents#

Textarea example#

Get started with the default example of a <Textarea> component below.

Edit on GitHub
  • React TypeScript
'use client';

import { Textarea, Label } from 'flowbite-react';

export default function TextareaExample() {
  return (
    <div>
      <div className="mb-2 block">
        <Label
          htmlFor="comment"
          value="Your message"
        />
      </div>
      <Textarea
        id="comment"
        placeholder="Write your thoughts here"
        rows="4"
      />
    </div>
  )
}

WYSIWYG Editor#

If you want to add other actions as buttons alongside your <Textarea> component, such as with a WYSIWYG editor, then you can use the example below.

Edit on GitHub
  • React TypeScript
'use client';

import { Textarea, Button, Label } from 'flowbite-react';

export default function TextareaExample() {
  return (
    <form>
      <div className="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
        <div className="flex items-center justify-between px-3 py-2 border-b dark:border-gray-600">
          <div className="flex flex-wrap items-center divide-gray-200 sm:divide-x dark:divide-gray-600">
            <div className="flex items-center space-x-1 sm:pr-4">
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Attach file
                </span>
              </Button>
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Embed map
                </span>
              </Button>
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Upload image
                </span>
              </Button>
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Format code
                </span>
              </Button>
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Add emoji
                </span>
              </Button>
            </div>
            <div className="flex flex-wrap items-center space-x-1 sm:pl-4">
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Add list
                </span>
              </Button>
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Settings
                </span>
              </Button>
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Timeline
                </span>
              </Button>
              <Button
                className="p-0 m-0"
                color="grey"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Download
                </span>
              </Button>
            </div>
          </div>
          <Button
            className="p-0 m-0"
            color="grey"
          >
            <SeeSourceCodeForSVG />
            <span className="sr-only">
              Full screen
            </span>
          </Button>
          <div
            className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
            id="tooltip-fullscreen"
            role="tooltip"
          >
            <p>
              Show full screen
            </p>
            <div
              className="tooltip-arrow"
              data-popper-arrow
            />
          </div>
        </div>
        <div className="px-4 py-2 bg-white rounded-b-lg dark:bg-gray-800">
          <label
            className="sr-only"
            for="editor"
          >
            Publish post
          </label>
          <Textarea
            className="block w-full px-0 text-sm text-gray-800 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
            id="editor"
            placeholder="Write an article..."
            required
            rows="8"
          />
        </div>
      </div>
      <Button type="submit">
        <p>
          Publish post
        </p>
      </Button>
    </form>
  )
}

Comment box#

Most often the <Textarea> component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.

Edit on GitHub

Remember, contributions to this topic should follow our Community Guidelines.

  • React TypeScript
'use client';

import { Textarea, Button, Label } from 'flowbite-react';

export default function TextareaExample() {
  return (
    <>
      <form>
        <div className="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
          <div className="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
            <Label
              className="sr-only"
              htmlFor="comment"
            >
              Your comment
            </Label>
            <Textarea
              className="w-full px-0 text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
              id="comment"
              placeholder="Write a comment..."
              required
              rows="4"
            />
          </div>
          <div className="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600">
            <Button type="submit">
              <p>
                Post comment
              </p>
            </Button>
            <div className="flex pl-0 space-x-1 sm:pl-2">
              <button
                className="inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
                type="button"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Attach file
                </span>
              </button>
              <button
                className="inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
                type="button"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Set location
                </span>
              </button>
              <button
                className="inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
                type="button"
              >
                <SeeSourceCodeForSVG />
                <span className="sr-only">
                  Upload image
                </span>
              </button>
            </div>
          </div>
        </div>
      </form>
      <p className="ml-auto text-xs text-gray-500 dark:text-gray-400">
        Remember, contributions to this topic should follow our
        <a
          className="text-blue-600 dark:text-blue-500 hover:underline"
          href="#"
        >
          Community Guidelines
        </a>
        .
      </p>
    </>
  )
}

Chatroom input#

If you want to build a chatroom component you will usually want to use a <Textarea> component to allow users to write multi-line chunks of text.

Edit on GitHub
  • React TypeScript
'use client';

import { Textarea, Button, Label } from 'flowbite-react';

export default function TextareaExample() {
  return (
    <form>
      <label
        className="sr-only"
        for="chat"
      >
        <p>
          Your message
        </p>
      </label>
      <div className="flex items-center rounded-lg bg-gray-50 px-3 py-2 dark:bg-gray-700">
        <Button color="grey">
          <SeeSourceCodeForSVG />
          <span className="sr-only">
            Upload image
          </span>
        </Button>
        <Button color="grey">
          <SeeSourceCodeForSVG />
          <span className="sr-only">
            Add emoji
          </span>
        </Button>
        <Textarea
          className="mx-4 block w-full p-2.5 text-sm"
          id="chat"
          placeholder="Your message..."
          rows="1"
        />
        <button
          className="inline-flex cursor-pointer justify-center rounded-full p-2 text-blue-600 hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
          type="submit"
        >
          <SeeSourceCodeForSVG />
          <span className="sr-only">
            Send message
          </span>
        </button>
      </div>
    </form>
  )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "base": "block w-full rounded-lg border disabled:cursor-not-allowed disabled:opacity-50 text-sm",
  "colors": {
    "gray": "bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
    "info": "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
    "failure": "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
    "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
    "success": "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500"
  },
  "withShadow": {
    "on": "shadow-sm dark:shadow-sm-light",
    "off": ""
  }
}

References#