Textarea

A Textarea component allows users to enter multi-line text. Built on top of heroui-native.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Textarea running in the Nayan UI example app

Usage

Source
Textarea.tsx
import { View } from 'react-native';
import { NInput, NText } from '@nayan-ui/native';


export default function InputScreen() {
  return (
    <View className="p-4 gap-1">
      <NText className="text-lg font-bold">Basic</NText>
      <NInput label="Name" />


      <NText className="text-lg font-bold">With description</NText>
      <NInput label="Email" description="We'll never share your email." />


      <NText className="text-lg font-bold">Required</NText>
      <NInput label="Username" isRequired />


      <NText className="text-lg font-bold">Invalid with error</NText>
      <NInput label="Password" isInvalid errorMessage="Password must be at least 8 characters." />


      <NText className="text-lg font-bold">Disabled</NText>
      <NInput label="Organization" isDisabled />


      <NText className="text-lg font-bold">Multiline (textarea)</NText>
      <NInput label="Bio" multiline description="Tell us about yourself." />


      <NText className="text-lg font-bold">All combined</NText>
      <NInput label="Phone" description="Include country code." isRequired isInvalid errorMessage="Invalid phone number." />
    </View>
  );
}

Attributes

10 props
NameTypeDefaultDetails
labelstringOptionalLabel for the textarea.
descriptionstringOptionalDescription text below the textarea.
errorMessagestringOptionalError message to display.
multilinebooleantrueSet to true for textarea mode (uses NInput with multiline).
isDisabledbooleanfalseWhether the textarea is disabled.
valuestringOptionalControlled textarea value.
onChange(value: string) => voidOptionalCallback when textarea value changes.
classNamestring' 'You can customise textarea by passing tailwind classes.
containerClassNamestring' 'You can customise container by passing tailwind classes.
labelClassNamestring' 'You can customise label by passing tailwind classes.

Tags

Other components solving nearby problems.