---
components: ["TextArea", "TextAreaSkeleton"]
---

<script>
  import { TextArea, TextAreaSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default

<TextArea labelText="App description" placeholder="Enter a description..." />

## Counter (character)

Specify a number using the `maxCount` prop to show a character counter. The default mode is `"charcacter"`.

The `maxlength` attribute is set to `maxCount` in this mode. You can override this by specifying `maxlength={undefined}`.

<TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} />

## Counter (word)

Specify `counterMode="word"` for the counter to count words instead of characters.

<TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} counterMode="word" />

## With helper text

<TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />

## Hidden label

<TextArea hideLabel labelText="App description" placeholder="Enter a description..." />

## Light variant

<TextArea light labelText="App description" placeholder="Enter a description..." />

## Read-only variant

<TextArea readonly labelText="App description" placeholder="Enter a description..." />

## Custom rows

Specify `rows` to adjust the height of the textarea.

By default, `rows` is set to `4`.

<TextArea rows={10} labelText="App description" placeholder="Enter a description..." />

## Custom cols

If `cols` is a number, the `textarea` will not be resizeable.

<TextArea cols={50} labelText="App description" placeholder="Enter a description..." />

## Invalid state

<TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />

## Warning state

<TextArea warn warnText="The app description requires additional approval." labelText="App description" placeholder="Enter a description..." />

## Disabled state

<TextArea disabled labelText="App description" placeholder="Enter a description..." />

## Skeleton

<TextAreaSkeleton />

## Skeleton without label

<TextAreaSkeleton hideLabel />