Textarea

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


Import the Textarea component using the following import statement.

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

Tones


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

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

Colors


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.

<View>
  <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" />
</View>

Sizes


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

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

Radiuses


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

<View>
  <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" />
</View>

Shadows


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

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

Validation


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

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

States


Textarea component supports disabled state.

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

Ring


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

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

Ref


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


Properties

PropTypeDescriptionDefault
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

Types

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