---
title: "Textarea — React"
canonical: https://sky-ui.cf.sky.com/components/textarea/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Textarea — React

```js
import { Textarea } from '@sky-uk/ui-core';
```

---

`Textarea` is a form component that closely matches the native `textarea` element and supports its key properties. [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).

```tsx
<Textarea />
```

---

## System Modifiers

The `Textarea` component accepts props applied using the following system modifiers:

- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [position](/core/system/position/)
- [width](/core/system/width/)

---

## Field

You can combine the `Textarea` component with the [Field](/components/field) component to add information like label and validation message.

---

### Placeholder

You can provide `placeholder` attribute that will be displayed on focus. `placeholder` attribute is independent from `Label`.

```tsx
<Field>
    <Field.Label htmlFor="my-input">Label</Field.Label>
    <Field.Control as={Textarea} placeholder="my placeholder" id="my-textarea" aria-describedby="message" />
    <Field.Message id="message">Your message goes here!</Field.Message>
</Field>
```

---

## Custom Textarea/Other Inputs

The wrapping component used to build the `Textarea` component is also available to use, should you need to create your own textarea/other inputs with extended functionality

This is provided for cases where you may need to build your own input that works a different way.

- `InputWrapper`: A `div` with pre-applied input styles.

```js
import { InputWrapper } from '@sky-uk/ui-core';
```

**Note:** Only use these components if you need custom functionality

```tsx
<InputWrapper />
```

---

## Accessibility

Please refer to the [W3C Forms Concepts](https://www.w3.org/WAI/tutorials/forms/) guide when working with forms.