A simple text area element that can be used to collect user input.

The Textarea component can be configured in multiple ways, allowing the developer to customize the look and feel of the component, by specifying properties such as size and radius.

import { Input } from '@rewind-ui/core';

function App() {
  return (
    <Textarea />


Import the Textarea component using the following import statement.

import { Textarea } from '@rewind-ui/core';


The Textarea component supports three tones: light, solid and transparent.

  <Textarea tone="light" placeholder="Light tone" />
  <Textarea tone="solid" placeholder="Solid tone" />
  <Textarea tone="transparent" placeholder="Transparent tone" />


The Textarea component supports the following colors: blue, purple, gray, dark and black.

The color property can be used to specify the color of the border and the ring on the focus state.

  <Textarea color="blue" placeholder="Blue color" />
  <Textarea color="purple" placeholder="Purple color" />
  <Textarea color="gray" placeholder="Gray color" />
  <Textarea color="dark" placeholder="Dark color" />
  <Textarea color="black" placeholder="Black color" />


The Textarea component supports four size options: xs, sm, md and lg.

  <Textarea size="xs" placeholder="Extra small" />
  <Textarea size="sm" placeholder="Small" />
  <Textarea size="md" placeholder="Medium" />
  <Textarea size="lg" placeholder="Large" />


The Textarea component supports the following radius options: none, sm, base, md, lg and xl.

  <Textarea radius="none" placeholder="none" />
  <Textarea radius="sm" placeholder="sm" />
  <Textarea radius="base" placeholder="base" />
  <Textarea radius="md" placeholder="md" />
  <Textarea radius="lg" placeholder="lg" />
  <Textarea radius="xl" placeholder="xl" />


The Textarea component supports the following shadow options: none, sm, base and md.

  <Textarea shadow="none" placeholder="none" />
  <Textarea shadow="sm" placeholder="sm" />
  <Textarea shadow="base" placeholder="base" />
  <Textarea shadow="md" placeholder="md" />


The Textarea component supports the following validation options: none, invalid, valid and warning.

  <Textarea validation="none" placeholder="none" />
  <Textarea validation="invalid" placeholder="invalid" />
  <Textarea validation="valid" placeholder="valid" />
  <Textarea validation="warning" placeholder="warning" />


Textarea component supports disabled state.

  <Textarea disabled placeholder="Disabled..." />


You can add a ring to the Textarea by setting the withRing prop to true.

  <Textarea withRing={true} placeholder="With ring..." />
  <Textarea withRing={false} placeholder="Without ring..." />


The Textarea component supports the ref prop, which allows for obtaining a reference to the associated underlying HTML element.

import { useRef } from 'react';
import { Textarea } from '@rewind-ui/core';

function App() {
  const ref = useRef<HTMLTextAreaElement>(null);
  return <Textarea ref={ref} />;

API Reference


colorTextareaColorSets the border and ring color on focus statedark
disabledbooleanDisables textareafalse
radiusTextareaRadiusSets the border radiusmd
shadowTextareaShadowSets the shadow sizenone
sizeTextareaSizeSets the textarea sizemd
toneTextareaToneSets the textarea tonelight
validationTextareaValidationSets the validation statenone
withRingbooleanShows a ring around the textarea on active statetrue


type TextareaColor = 'blue' | 'purple' | 'gray' | 'dark' | 'black';
type TextareaRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';
type TextareaShadow = 'none' | 'sm' | 'base' | 'md';
type TextareaSize = 'xs' | 'sm' | 'md' | 'lg';
type TextareaTone = 'light' | 'solid' | 'transparent';
type TextareaValidation = 'none' | 'invalid' | 'valid' | 'warning';