Textarea
Multi-line text input with auto-resize
Import: import { Textarea } from 'react-native-mantine';
Usage
import { Textarea } from 'react-native-mantine';
<Textarea
label="Description"
placeholder="Enter your description..."
minRows={4}
onChangeText={setText}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
minRows | number | 3 | Minimum number of visible text lines. Controls the minimum height of the textarea |
maxRows | number | Maximum number of visible text lines. When autosize is enabled, textarea will not exceed this height | |
autosize | boolean | false | If true, textarea height automatically adjusts to fit content between minRows and maxRows |
label | React.ReactNode | Input label displayed above the textarea field | |
description | React.ReactNode | Description text displayed below the label and above the textarea | |
error | React.ReactNode | Error message displayed below the textarea. When set, textarea border becomes red | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'sm' | Textarea size that controls font size and padding |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | 'sm' | Key of theme.radius or any valid number to set border-radius |
icon | React.ReactNode | Icon displayed on the left side of the textarea field | |
required | boolean | false | Displays a red asterisk (*) after the label to indicate field is required |
variant | 'default' | 'filled' | 'unstyled' | 'default' | Controls textarea appearance: default (outlined), filled (background), or unstyled (no borders) |
placeholder | string | Placeholder text displayed when textarea is empty | |
value | string | Textarea value for controlled component | |
onChangeText | (text: string) => void | Callback fired when textarea value changes | |
onBlur | () => void | Callback fired when textarea loses focus | |
editable | boolean | true | If false, textarea is read-only and cannot be edited |
autoCapitalize | 'none' | 'sentences' | 'words' | 'characters' | 'sentences' | Controls automatic capitalization behavior |
style | ViewStyle | Additional styles applied to the textarea element itself | |
wrapperStyle | ViewStyle | Additional styles applied to the wrapper container |