Textarea

The Textarea component is a text field used to get textarea from the user.

import {
  Textarea,
  TextareaBase,
  TextareaGhost,
  TextareaIcon,
  TextareaSpinner,
  TextareaWrapper,
} from "@adaptui/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage

<Textarea placeholder="Search" aria-label="Textarea Story Default Example" rowsMin={3} col={30} />

<Textarea placeholder="Search" aria-label="Textarea Story Default Example" rowsMin={3} col={30} />

Disabled

Invalid

Textarea Variants

Variants can be set using the variant prop. The default variant is outline. The available variants are: outline subtle underline

import { Textarea } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        variant="outline"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        variant="subtle"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        variant="underline"
      />
    </div>
  );
};

import { Textarea } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        variant="outline"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        variant="subtle"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        variant="underline"
      />
    </div>
  );
};

Textarea sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

import { Textarea } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        size="sm"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        size="md"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        size="lg"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        size="xl"
      />
    </div>
  );
};

import { Textarea } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        size="sm"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        size="md"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        size="lg"
      />
      <Textarea
        placeholder="Search"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        size="xl"
      />
    </div>
  );
};

Textarea autoSize

By setting autoSize prop the textarea will increase it's size according to the content.

import { Textarea } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex w-72 flex-col space-y-2">
      <Textarea
        placeholder="Search"
        autoSize={true}
        defaultValue="Velit voluptatem a veritatis nam ducimus ut corporis. Iure dolorem perspiciatis nihil quam laudantium ea magnam est voluptatem. Quam repellat pariatur quasi accusantium aut architecto ut est. Ab totam voluptate beatae et alias quod vero enim tempora. Corporis laboriosam velit eveniet eos ut repellat pariatur ipsam."
      />
    </div>
  );
};

import { Textarea } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex w-72 flex-col space-y-2">
      <Textarea
        placeholder="Search"
        autoSize={true}
        defaultValue="Velit voluptatem a veritatis nam ducimus ut corporis. Iure dolorem perspiciatis nihil quam laudantium ea magnam est voluptatem. Quam repellat pariatur quasi accusantium aut architecto ut est. Ab totam voluptate beatae et alias quod vero enim tempora. Corporis laboriosam velit eveniet eos ut repellat pariatur ipsam."
      />
    </div>
  );
};

Textarea Resize

resize prop contarints the resize direction of the textarea, It can accept 4 values both | vertical | horizontal | none

import { Textarea } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Textarea
        placeholder="None"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        resize="none"
      />
      <Textarea
        placeholder="Both"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        resize="both"
      />
      <Textarea
        placeholder="Horizontal"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        resize="horizontal"
      />
      <Textarea
        placeholder="Vertical"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        resize="vertical"
      />
    </div>
  );
};

import { Textarea } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Textarea
        placeholder="None"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        resize="none"
      />
      <Textarea
        placeholder="Both"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        resize="both"
      />
      <Textarea
        placeholder="Horizontal"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        resize="horizontal"
      />
      <Textarea
        placeholder="Vertical"
        aria-label="Textarea Story Default Example"
        rowsMin={3}
        col={30}
        resize="vertical"
      />
    </div>
  );
};

API Reference

Prop	Type	Default
`size`	`union`	`md`
`variant`	`union`	`outline`
`rowsMin`	`number`	-
`rowsMax`	`number`	-
`autoSize`	`boolean`	`false`
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`false`
`loading`	`boolean`	`false`
`icon`	`React.ReactNode`	-
`spinner`	`React.ReactNode`	-

Last updated on July 27, 2022

Textarea

Imports#

Usage#

Textarea Variants#

Textarea sizes#

Textarea autoSize#

Textarea Resize#

API Reference#

Imports