# Textarea
Multi-line text control with mono variant for code snippets.
Preview: https://design.freecodecamp.org/playground#textarea
## Add to your project
Use React and TypeScript. Required packages: `react@>=18 <20`. No freeCodeCamp package is needed.
Copy the files below to the indicated paths, relative to your project root. If you change the layout, update relative imports too.
Import the CSS once from your application entry. For an entry in src/:
```ts
import './ui/theme/tokens.css';
import './ui/theme/base.css';
import './ui/textarea/textarea.css';
import './ui/form-group/form-group.css';
```
The theme is shared: reuse it if already installed. Fonts use /fonts/ URLs on your host. Download the font files listed in https://design.freecodecamp.org/registry/starter.md or change those URLs in your copied tokens.css.
## Example
```tsx
import { FormGroup } from './ui/form-group/FormGroup';
import { Textarea } from './ui/textarea/Textarea';
export function Example() {
return (
);
}
```
## Interaction guidance
Review https://www.w3.org/WAI/ARIA/apg/patterns/ and test keyboard operation in your project.
## Component source
### src/ui/textarea/Textarea.tsx
Source: https://design.freecodecamp.org/registry/textarea/Textarea.tsx
```tsx
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useRef
} from 'react';
export type TextareaVariant = 'default' | 'mono';
export interface TextareaProps extends React.TextareaHTMLAttributes {
variant?: TextareaVariant;
invalid?: boolean;
autoResize?: boolean;
}
function fit(el: HTMLTextAreaElement | null): void {
if (!el) return;
el.style.height = 'auto';
el.style.height = `${el.scrollHeight}px`;
}
export const Textarea = forwardRef(
(
{
className = '',
variant = 'default',
invalid,
autoResize,
onInput,
...rest
},
ref
) => {
const innerRef = useRef(null);
useImperativeHandle(ref, () => innerRef.current as HTMLTextAreaElement);
useEffect(() => {
if (!autoResize) return;
fit(innerRef.current);
}, [autoResize, rest.value, rest.defaultValue]);
const classes = [
'textarea',
variant !== 'default' && `textarea--${variant}`,
className
]
.filter(Boolean)
.join(' ');
return (