mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(text-area)!: integrate TextArea with v11 (#1967)

Browse source
This commit is contained in:
Eric Liu 2024-04-29 21:50:33 -07:00 • committed by GitHub
commit d7f0ed1947
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 181 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/src/pages/components/TextArea.svx
View file

@ -11,14 +11,20 @@ components: ["TextArea", "TextAreaSkeleton"]
<TextArea labelText="App description" placeholder="Enter a description..." />
## Maximum character count
## Counter (character)
Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label.
Specify a number using the `maxCount` prop to show a character counter. The default mode is `"charcacter"`.
You can always use the native `maxlength` attribute if you'd prefer that a counter not be shown.
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..." />
@ -31,14 +37,32 @@ You can always use the native `maxlength` attribute if you'd prefer that a count
<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..." />