mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
78072a1c66* chore(deps): upgrade carbon-components to v10.53.0 * feat(text-area): add maxCount prop * docs(text-area): add maximum character count * feat(file-uploader): add disabled prop * docs(file-uploader): add disabled state example
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 /> |