TextArea

Source code
Table of Contents

Usage

Default

<script>
  import { TextArea } from "carbon-components-svelte";
</script>

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

With helper text

A rich description helps us better recommend related products and services
<script>
  import { TextArea } from "carbon-components-svelte";
</script>

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

Hidden label

<script>
  import { TextArea } from "carbon-components-svelte";
</script>

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

Light variant

<script>
  import { TextArea } from "carbon-components-svelte";
</script>

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

Custom rows

<script>
  import { TextArea } from "carbon-components-svelte";
</script>

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

Invalid state

Only plain text characters are allowed
<script>
  import { TextArea } from "carbon-components-svelte";
</script>

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

Disabled state

<script>
  import { TextArea } from "carbon-components-svelte";
</script>

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

Skeleton

<script>
  import { TextAreaSkeleton } from "carbon-components-svelte";
</script>

<TextAreaSkeleton />

Skeleton without label

<script>
  import { TextAreaSkeleton } from "carbon-components-svelte";
</script>

<TextAreaSkeleton hideLabel />
Table of Contents