---
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..." />

## Maximum character count

Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label.

You can always use the native `maxlength` attribute if you'd prefer that a counter not be shown.

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

## 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..." />

## Custom rows

<TextArea rows={10} 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..." />

## Disabled state

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

## Skeleton

<TextAreaSkeleton />

## Skeleton without label

<TextAreaSkeleton hideLabel />