TextArea

Multi-line text input component.

TextArea

TextArea is a form component for capturing multi-line text input.

Import

import { TextArea } from 'radix-native-ui';

Usage

import { TextArea } from 'radix-native-ui';

<TextArea
  placeholder="Enter your message"
  value={message}
  onChangeText={setMessage}
/>

Props

Examples

Basic TextArea

<TextArea
  placeholder="Enter your message"
  value={message}
  onChangeText={setMessage}
/>

With Character Limit

<TextArea
  placeholder="Write a bio (max 200 characters)"
  value={bio}
  onChangeText={setBio}
  maxLength={200}
/>

Different Sizes

<TextArea size="1" placeholder="Small" />
<TextArea size="2" placeholder="Medium (default)" />
<TextArea size="3" placeholder="Large" />

With Error

<TextArea
  placeholder="Enter description"
  value={description}
  onChangeText={setDescription}
  error="Description is required"
/>

Contact Form

<Flex direction="column" gap={3}>
  <TextField placeholder="Your Name" />
  <TextField placeholder="Email" keyboardType="email-address" />
  <TextArea
    placeholder="Your Message"
    rows={6}
  />
  <Button>Send Message</Button>
</Flex>

With Slots

TextArea supports slots for adding icons or buttons on the left or right side of the input:

import { TextArea } from 'radix-native-ui';
import { SearchIcon } from './icons';

// Left slot
<TextArea.Root placeholder="Write a comment...">
  <TextArea.Slot side="left">
    <SearchIcon />
  </TextArea.Slot>
</TextArea.Root>

Related

• TextField - Single-line text input
• Button - Button component