---
title: TextArea | UI
description: A TextArea component is used to create clickable elements that perform an action when pressed.
pageTitle: TextArea
pageDescription: A TextArea component is used to create clickable elements that perform an action when pressed.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Forms/TextArea" />

import { TextArea } from './TextArea';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  Text,
  InlineCode,
} from '@gluestack/design-system';

import { styled } from '@dank-style/react';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `TextArea` component to your project.

```jsx
npx install @gluestack-ui add text-area
```

## Import

```jsx
// import the component from your component folder
import { TextArea } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<TextArea placeholder="Enter text here...">
  <TextArea.Input />
</TextArea>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        TextArea,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

```jsx
export default () => (
  <TextArea>
    <TextArea.Input />
  </TextArea>
);
```

## API Reference

### TextArea

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### TextArea.Input

Contains all TextInput related layout style props and actions.
It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput#props) component.

<AppProvider>
  <Table>
    <Table.THead>
      <Table.TR>
        <Table.TH>
          <Table.TText>Prop</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Type</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Default</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Description</Table.TText>
        </Table.TH>
      </Table.TR>
    </Table.THead>
    <Table.TBody>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isInvalid</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>bool</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`When true, the input displays an error state.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isDisabled</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>bool</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`When true, the input is disabled and cannot be edited.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isHovered</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>bool</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`When true, the input displays a hover state.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isFocused</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>bool</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`When true, the input displays a focus state.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isRequired</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>bool</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, sets aria-required="true" on the input.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isReadOnly</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>bool</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the input value cannot be edited.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isFullWidth</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>bool</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the input spans the full width of its parent container.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>onFocus</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>any</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Function to be called when the input is focused.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>onBlur</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>any</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Function to be called when the input is blurred.`}</Table.TText>
        </Table.TD>
      </Table.TR>
    </Table.TBody>
  </Table>
</AppProvider>

## Accessibility

### Keyboard

- setting the accessibilityLabel and accessibilityHint

### Screen Reader

- VoiceOver: accessible and accessibilityLabel props to describe the input's purpose
- `accessibilityTraits` and `accessibilityHint` for the various states of the input, such as "double tap to edit"

## Dependencies

- `@gluestack-ui/utils`
- `@react-native-aria/focus`
- `react-native-svg`
- `@gluestack-ui/react-native-aria`

# Advanced

## Customizing the TextArea

We have a function called `createTextArea` which can be used to create a custom button component. This function takes in a configuration object which contains the styled components that you want to use for the TextArea. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root, Input } from '../components/core/text-area/styled-components';

// import the createTextArea function
import { createTextArea } from '@gluestack-ui/textarea';

// Understanding the API
const TextArea = createTextArea({
  Root,
  Input,
});

// Using the textarea component
export default () => (
  <TextArea>
    <TextArea.Input placeholder="your text goes here..." />
  </TextArea>
);
```

Default styling of all these components can be found in the `components/text-area` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/TextArea/index.tsx) of the styled `TextArea` components.