Textarea

A multi-line text input component for longer text content. Built on React Native's TextInput with multiline enabled.

Installation

npx @tapcn/cli add textarea

Or using shadcn directly:

npx shadcn@latest add https://tapcn.vercel.app/r/textarea.json

Usage

import { Textarea } from '~/components/ui/textarea';

export function Example() {
  return <Textarea placeholder="Type your message here." />;
}

With state management

import { useState } from 'react';
import { Textarea } from '~/components/ui/textarea';

export function ControlledTextarea() {
  const [value, setValue] = useState('');

  return (
    <Textarea
      placeholder="Write your bio..."
      value={value}
      onChangeText={setValue}
    />
  );
}

With label

import { View } from 'react-native';
import { Label } from '~/components/ui/label';
import { Textarea } from '~/components/ui/textarea';

export function TextareaWithLabel() {
  return (
    <View className="gap-2">
      <Label nativeID="message">Your Message</Label>
      <Textarea
        placeholder="What's on your mind?"
        aria-labelledby="message"
      />
    </View>
  );
}

Disabled state

<Textarea placeholder="Disabled textarea" editable={false} />

With character count

import { useState } from 'react';
import { View } from 'react-native';
import { Text } from '~/components/ui/text';

export function TextareaWithCount() {
  const [value, setValue] = useState('');
  const maxLength = 280;

  return (
    <View className="gap-1">
      <Textarea
        placeholder="What's happening?"
        value={value}
        onChangeText={setValue}
        maxLength={maxLength}
      />
      <Text className="text-xs text-muted-foreground text-right">
        {value.length}/{maxLength}
      </Text>
    </View>
  );
}

Props

Textarea extends React Native's TextInputProps:

Prop	Type	Default	Description
`className`	`string`	--	Additional NativeWind classes
`editable`	`boolean`	`true`	Whether the textarea is editable (acts as disabled when `false`)
`placeholder`	`string`	--	Placeholder text

All standard TextInput props are supported (value, onChangeText, maxLength, etc.).

Dependencies

No component dependencies. Only requires the cn() utility from lib/utils.

Textarea

On this page