# Text Area

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<TextArea placeholder="Reply to comment…" />
```

## API Reference

This component is based on the `textarea` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                                          | Type                                                         | Default     |
| ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- |
| `size`                                                                                                                        | `Responsive<"1" \| "2" \| "3">`                              | `"2"`       |
| `variant`The visual variant to apply, see [theme overview](/themes/docs/theme/overview#variants) for more details.            | `"classic" \| "surface" \| "soft"`                           | `"surface"` |
| `resize`                                                                                                                      | `Responsive<"none" \| "vertical" \| "horizontal" \| "both">` | —           |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details. | `enum`                                                       | —           |
| `radius`Overrides the radius inherited from the theme. See the [radius guide](/themes/docs/theme/radius) for more details.    | `"none" \| "small" \| "medium" \| "large" \| "full"`         | —           |

## Examples

### Size

Use the `size` prop to control the size.

```jsx
<Flex direction="column" gap="3">

	<Box maxWidth="200px">

		<TextArea size="1" placeholder="Reply to comment…" />

	</Box>

	<Box maxWidth="250px">

		<TextArea size="2" placeholder="Reply to comment…" />

	</Box>

	<Box maxWidth="300px">

		<TextArea size="3" placeholder="Reply to comment…" />

	</Box>

</Flex>
```

### Variant

Use the `variant` prop to control the visual style.

```jsx
<Flex direction="column" gap="3" maxWidth="250px">

	<TextArea variant="surface" placeholder="Reply to comment…" />

	<TextArea variant="classic" placeholder="Reply to comment…" />

	<TextArea variant="soft" placeholder="Reply to comment…" />

</Flex>
```

### Color

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx
<Flex direction="column" gap="3" maxWidth="250px">

	<TextArea color="blue" variant="soft" placeholder="Reply to comment…" />

	<TextArea color="green" variant="soft" placeholder="Reply to comment…" />

	<TextArea color="red" variant="soft" placeholder="Reply to comment…" />

</Flex>
```

### Radius

Use the `radius` prop to assign a specific radius value.

```jsx
<Flex direction="column" gap="3" maxWidth="250px">

	<TextArea radius="none" placeholder="Search the docs…" />

	<TextArea radius="large" placeholder="Search the docs…" />

	<TextArea radius="full" placeholder="Search the docs…" />

</Flex>
```

### Resize

Use the `resize` prop to enable resizing on one or both axis.

```jsx
<Flex direction="column" gap="3" maxWidth="250px">

	<TextArea resize="none" placeholder="Search the docs…" />

	<TextArea resize="vertical" placeholder="Search the docs…" />

	<TextArea resize="horizontal" placeholder="Search the docs…" />

	<TextArea resize="both" placeholder="Search the docs…" />

</Flex>
```