mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
76 lines
No EOL
2.2 KiB
Text
76 lines
No EOL
2.2 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..." />
|
|
|
|
## Counter (character)
|
|
|
|
Specify a number using the `maxCount` prop to show a character counter. The default mode is `"charcacter"`.
|
|
|
|
The `maxlength` attribute is set to `maxCount` in this mode. You can override this by specifying `maxlength={undefined}`.
|
|
|
|
<TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} />
|
|
|
|
## Counter (word)
|
|
|
|
Specify `counterMode="word"` for the counter to count words instead of characters.
|
|
|
|
<TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} counterMode="word" />
|
|
|
|
## 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..." />
|
|
|
|
## Read-only variant
|
|
|
|
<TextArea readonly labelText="App description" placeholder="Enter a description..." />
|
|
|
|
## Custom rows
|
|
|
|
Specify `rows` to adjust the height of the textarea.
|
|
|
|
By default, `rows` is set to `4`.
|
|
|
|
<TextArea rows={10} labelText="App description" placeholder="Enter a description..." />
|
|
|
|
## Custom cols
|
|
|
|
If `cols` is a number, the `textarea` will not be resizeable.
|
|
|
|
<TextArea cols={50} 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..." />
|
|
|
|
## Warning state
|
|
|
|
<TextArea warn warnText="The app description requires additional approval." 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 /> |