Textarea

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

import {
  Textarea,
  TextareaBase,
  TextareaGhost,
  TextareaIcon,
  useTextareaProps,
  useTextareaState,
  TextareaWrapper,
} from "@renderlesskit/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

<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>

<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

<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>

<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.

<div className="inline-flex flex-col space-y-2 w-72" >
  <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>

<div className="inline-flex flex-col space-y-2 w-72" >
  <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

<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>

<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 18, 2022

Textarea

Imports#

Usage#

Textarea Variants#

Textarea sizes#

Textarea autoSize#

Textarea Resize#

API Reference#

Imports