mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
52 lines
No EOL
1.5 KiB
Text
52 lines
No EOL
1.5 KiB
Text
---
|
|
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 /> |