@neo4j-ndl/react/skills/ndl-react/components/text-area.md

React implementation of Neo4j Design System

# TextArea

Import: `import { TextArea } from '@neo4j-ndl/react'`

## Props

### TextArea

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `ariaLabel` | `string` |  |  | Aria label for accessibility when no visible label is provided |
| `errorText` | `ReactNode` |  |  | Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon |
| `helpText` | `ReactNode` |  |  | Assistive text displayed below the textarea |
| `isDisabled` | `boolean` |  | `false` | Whether the textarea is disabled |
| `isFluid` | `boolean` |  | `false` | Whether the textarea should take the full available width |
| `isOptional` | `boolean` |  | `false` | Whether to display the Optional label next to the field label |
| `isReadOnly` | `boolean` |  | `false` | Whether the textarea is read-only |
| `label` | `ReactNode` |  |  | The label displayed above the textarea |
| `moreInformationText` | `ReactNode` |  |  | Text displayed in the information tooltip shown next to the label |
| `placeholder` | `string` |  |  | Placeholder text displayed when the textarea is empty |
| `ref` | `Ref<HTMLTextAreaElement>` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of the textarea |
| `tooltipProps` | `TooltipObjectProps` |  |  | Props for the Tooltip component used by the information icon |
| `value` | `string \| number \| readonly string[]` |  |  | The current value of the textarea |

When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.

## Accessibility

## Implementation guidelines

Please provide either a `label` or an `ariaLabel` to keep the component accessible for screen readers.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextArea } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <TextArea
      label="Label"
      helpText="Friendly help text"
      placeholder="Placeholder text"
    />
  );
};

export default Component;
```

### Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextArea } from '@neo4j-ndl/react';

const Component = () => {
  return <TextArea value="Example" label="Label" isDisabled={true} />;
};

export default Component;
```

### Error

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextArea } from '@neo4j-ndl/react';

const Component = () => {
  return <TextArea label="Label" errorText="This is an error message" />;
};

export default Component;
```

### Fluid

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextArea } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <TextArea label="Label" helpText="Friendly help text" isFluid={true} />
  );
};

export default Component;
```

### Information Icon

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextArea } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <TextArea
      label="Label"
      moreInformationText="Information icon text"
      tooltipProps={{
        root: {
          placement: 'right',
        },
      }}
    />
  );
};

export default Component;
```

### Optional

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextArea } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <TextArea label="Label" helpText="Friendly help text" isOptional={true} />
  );
};

export default Component;
```

### Resizable Style

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextArea } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <TextArea
      label="Resizable"
      style={{ resize: 'both' }}
      helpText="Try pulling in the corner"
    />
  );
};

export default Component;
```

### Sizes

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextArea } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-gap-6">
      <TextArea label="Small text area" size="small" />
      <TextArea label="Medium text area" size="medium" />
      <TextArea label="Large text area" size="large" />
    </div>
  );
};

export default Component;
```