Textarea

A multiline text input component with variants for forms and content entry.

Web preview — components render natively on iOS & Android

import { Textarea } from "@/components/ui/textarea";

export function MyScreen() {
  return (
    <Textarea
      placeholder="Type your message here..."
      onChangeText={(text) => console.log(text)}
    />
  );
}

Installation#

npx @aniui/cli add textarea

Usage#

app/index.tsx

import { Textarea } from "@/components/ui/textarea";

export function MyScreen() {
  return (
    <Textarea
      placeholder="Type your message here..."
      onChangeText={(text) => console.log(text)}
    />
  );
}

Variants#

Web preview — components render natively on iOS & Android

<Textarea variant="default" placeholder="Default variant" />
<Textarea variant="ghost" placeholder="Ghost variant" />

Props#

PropTypeDefault

variant

"default" | "ghost"

"default"

className

string

—

Also accepts all TextInput props from React Native.

Accessibility#

accessibilityRole is set on the underlying multi-line TextInput.
Supports all standard React Native accessibility props.

Source#

components/ui/textarea.tsx

import React from "react";
import { View, TextInput, useColorScheme } from "react-native";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

// Padding lives on the wrapping View (a raw TextInput doesn't honor `px-*`
// reliably), so the text inset matches Input and is consistent on all sides —
// under both NativeWind and Uniwind.
const textareaVariants = cva(
  "rounded-md border px-4 py-3 min-h-24",
  {
    variants: {
      variant: {
        default: "border-input bg-background",
        ghost: "border-transparent bg-transparent",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

export interface TextareaProps
  extends React.ComponentPropsWithoutRef<typeof TextInput>,
    VariantProps<typeof textareaVariants> {
  className?: string;
}

export const Textarea = React.forwardRef<
  React.ElementRef<typeof TextInput>,
  TextareaProps
>(function Textarea({ variant, className, ...props }, ref) {
  const dark = useColorScheme() === "dark";
  const caret = dark ? "#fafafa" : "#18181b";
  return (
    <View className={cn(textareaVariants({ variant }), className)}>
      <TextInput
        ref={ref}
        className="flex-1 p-0 text-foreground placeholder:text-muted-foreground text-base"
        placeholderTextColor={dark ? "#a1a1aa" : "#71717a"}
        keyboardAppearance={dark ? "dark" : "light"}
        selectionColor={caret}
        cursorColor={caret}
        multiline
        textAlignVertical="top"
        {...props}
      />
    </View>
  );
});

Previous← Text NextTimeline →