Textarea

Source

The Textarea component in Pearl UI is a versatile and customizable element used to gather user input in a multiline text field. It is a composition of the Input component, therefore it supports all its sizes, variants, color schemes, and most of its props. By default, it renders a text field with a medium size and filled variant.

Import#

import { Textarea } from "pearl-ui";

Usage#

<Textarea  placeholder="Enter text here"  onChangeText={(newValue) => console.log(newValue)}/>

Textarea sizes#

Use the size prop to change the size of the textarea field. You can set the value to the keys available in PearlTheme.components.Input["sizes"], which are "xs", "s", "m", and "l" in the default component configuration.

<Textarea  size="xs"  placeholder="Extra small textarea"/>
<Textarea  size="s"  placeholder="Small textarea"/>
<Textarea  size="m"  placeholder="Medium textarea"/>
<Textarea  size="l"  placeholder="Large textarea"/>

Textarea variants#

The variant prop allows you to change the visual style of the textarea field. The available variants are "filled" and "outline" as defined in the default component configuration.

<Textarea  variant="filled"  placeholder="Filled variant"/>
<Textarea  variant="outline"  placeholder="Outlined variant"/>

Textarea Color Schemes#

The colorScheme prop allows you to change the color palette of the textarea field. The available color schemes are "primary", "secondary", "neutral", etc as defined in the default Pearl theme.

<Textarea  colorScheme="primary"  placeholder="Primary color scheme"/>
<Textarea  colorScheme="secondary"  placeholder="Secondary color scheme"/>

Textarea Focus State#

The Textarea component supports a focus state, which is activated when the text inside the field can be edited. You can customize the visual style of the textarea field when it is focused using the _focus prop.

<Textarea  _focus={{    bgColor: "cyan",    borderColor: "violet",  }}  onFocus={() => console.log("Field was focused!")}/>

Textarea Invalid State#

The Textarea component supports an error state, which can be activated based on your validation criteria. You can customize the visual style of the textarea field when it is in an error state using the _invalid prop. The isInvalid prop is used to define whether the textarea field has an error or not.

<Textarea  isInvalid={true}  _invalid_={{    bgColor: "pink",    borderColor: "red",  }}/>

Overriding Styles#

The Textarea component supports a variety of style props which can be used to override the pre-defined variant style in the theme.

// The backgroundColor prop overrides the default component config value of backgroundColor="neutral.200"<Textarea variant="filled" backgroundColor="green" />

Example#

Embed not loading? Click here

Accessibility#

Textarea has the role of text field.
When Textarea is disabled, it is reflected as disabled in screen readers.
Textarea has the default accessibility label set as the placeholder value passed into it. A custom label can be specified using the accessibilityLabel prop.

Component Properties#

Supported Style Properties#

The Textarea component is a composition of the Input component, which means all Input props can be passed to it.

Additional Properties#

Name	Required	Type	Default	Description
`rows`	No	number	`4`	Number of rows in the text field (Android Only)