Textarea

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

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

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

Source

components/ui/textarea.tsx

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

const textareaVariants = cva(
  "rounded-md border text-foreground placeholder:text-muted-foreground align-top",
  {
    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 function Textarea({ variant, className, ...props }: TextareaProps) {
  return (
    <TextInput
      className={cn(textareaVariants({ variant }), "min-h-24 px-4 py-3 text-base", className)}
      placeholderTextColor="hsl(240, 3.8%, 46.1%)"
      multiline
      textAlignVertical="top"
      {...props}
    />
  );
}