Textarea

The Textarea component wraps React Native's TextInput with multiline enabled, providing a styled multiline text area with consistent theming, focus rings, and placeholder support. It uses textAlignVertical="top" for proper text alignment.

Preview

Installation

npx novaui-cli add textarea

Import

import { Textarea } from 'novaui-components'

Basic Usage

A multiline text input with placeholder text:

import { Textarea } from 'novaui-components'

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

Examples

Custom Number of Lines

Control the initial height with numberOfLines:

<Textarea placeholder="Short input..." numberOfLines={2} />

Disabled State

<Textarea placeholder="Cannot edit this textarea" editable={false} />

With Value

import { useState } from 'react'
import { Textarea } from 'novaui-components'

export function ControlledTextarea() {
  const [value, setValue] = useState(
    'This is a pre-filled textarea with some content that the user can edit as needed.'
  )

  return (
    <Textarea
      value={value}
      onChangeText={setValue}
      placeholder="Enter description"
    />
  )
}

Props API

TextareaProps

Extends React.ComponentPropsWithoutRef<typeof TextInput> and includes:

The component automatically sets multiline to true and textAlignVertical to "top". All standard React Native TextInput props are also supported.

Best Practices

1. Set appropriate height: Use numberOfLines to match the expected content length — 2-3 for short notes, 6+ for long-form content
2. Always include a placeholder: Help users understand what content is expected
3. Use with Field: Wrap in a Field component with a label for accessible forms
4. Consider max length: Set maxLength to prevent overly long submissions when appropriate

Related Components

• Use with Field and FieldLabel for labeled form layouts
• Pair with Input for single-line text fields
• Combine with Button for form submission