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