Textarea

Forms

A multi-line text input that grows automatically with its content up to a configurable maximum height.

Installation

bash

npx native-mate add textarea

Examples

#FAFAFA

Radius100%

Usage

tsx

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

const [bio, setBio] = useState('')

<Textarea
  label="Bio"
  placeholder="Tell us about yourself…"
  value={bio}
  onChangeText={setBio}
  hint="Up to 300 characters"
  maxRows={6}
/>

Props

Prop	Type	Default	Description
label	string	—	Label rendered above the textarea.
error	string	—	Error message rendered below. Turns the border red.
hint	string	—	Helper text shown below the textarea.
minRows	number	3	Minimum number of visible rows.
maxRows	number	8	Maximum rows before the textarea scrolls internally.
...TextInputProps	TextInputProps	—	All standard RN TextInput props are forwarded.

Example

tsx

import { useState } from 'react'
import { Textarea } from '~/components/ui/textarea'
import { Button } from '~/components/ui/button'
import { View } from 'react-native'

export function TextareaExample() {
  const [message, setMessage] = useState('')

  return (
    <View style={{ gap: 12, padding: 16 }}>
      <Textarea
        label="Message"
        placeholder="Write your message here…"
        value={message}
        onChangeText={setMessage}
        minRows={4}
        maxRows={10}
        hint={`${message.length} / 500`}
      />
      <Button disabled={message.trim().length === 0}>Send</Button>
    </View>
  )
}

Select

Progress