The Textarea component allows you to easily create multi-line text inputs.
const Example = () => {
return <Stack space={4} w="90%">
<TextArea h={20} placeholder="Text Area Placeholder" />
</Stack>;
};
Invalid and Disabled TextArea
const Example = () => {
return <Stack space={4} w="90%">
<Center>
<Text>Invalid TextArea</Text>
</Center>
<TextArea aria-label="t1" numberOfLines={4} placeholder="Invalid TextArea" isInvalid _dark={{
placeholderTextColor: "gray.300"
}} />
<Center>
<Text>Disabled TextArea</Text>
</Center>
<TextArea aria-label="t1Disabled" placeholder="Disabled TextArea" isDisabled />
</Stack>;
};
Value Controlled TextArea
const Example = () => {
const [textAreaValue, setTextAreaValue] = useState("Value Controlled");
const demoValueControlledTextArea = e => {
setTextAreaValue(e.currentTarget.value);
};
return <Stack space={4} w="90%">
<TextArea value={textAreaValue} onChange={demoValueControlledTextArea} />
</Stack>;
};
TextArea implements
,
,
,
,
,
,
,
,
,
,
,
Maps to react-native TextInput's numberOfLines.
NativeBase ships with a default theme for each component. Check out the default theme of the textArea
.
Info:
We can easily extend the textArea component theme using extendTheme function as described in the documentation .