11# Textarea component
22
3- :: tabs { :titles =' ["Usage", "API", "Source Code" ] ' class =" mt-8 " }
3+ :: tabs { :titles =' ["Usage", "API"] ' class =" mt-8 " }
44
55#tab-1
66
@@ -12,15 +12,7 @@ The Textarea is a multi-line text input control allows users to enter any combin
1212
1313<Showcase showcase-name =" Textarea/TextareaDisabled " >
1414
15- :: vue-only
16- <<<../../../preview/nuxt/pages/showcases/Textarea/TextareaDisabled.vue
17- ::
18- :: react-only
19- <<<../../../preview/next/pages/showcases/Textarea/TextareaDisabled.tsx
20- ::
21- :: qwik-only
2215<<<../../../website/src/routes/showcases/Textarea/TextareaDisabled/index.tsx
23- ::
2416
2517</Showcase >
2618
@@ -30,15 +22,8 @@ The Textarea is a multi-line text input control allows users to enter any combin
3022
3123<Showcase showcase-name =" Textarea/TextareaReadonly " >
3224
33- :: vue-only
34- <<<../../../preview/nuxt/pages/showcases/Textarea/TextareaReadonly.vue
35- ::
36- :: react-only
37- <<<../../../preview/next/pages/showcases/Textarea/TextareaReadonly.tsx
38- ::
39- :: qwik-only
4025<<<../../../website/src/routes/showcases/Textarea/TextareaReadonly/index.tsx
41- ::
26+
4227</Showcase >
4328
4429### Invalid State
@@ -47,15 +32,8 @@ If you pass the `invalid` prop, the Textarea will be styled to indicate an inval
4732
4833<Showcase showcase-name =" Textarea/TextareaInvalid " style =" min-height : 200px ;" >
4934
50- :: vue-only
51- <<<../../../preview/nuxt/pages/showcases/Textarea/TextareaInvalid.vue
52- ::
53- :: react-only
54- <<<../../../preview/next/pages/showcases/Textarea/TextareaInvalid.tsx
55- ::
56- :: qwik-only
5735<<<../../../website/src/routes/showcases/Textarea/TextareaInvalid/index.tsx
58- ::
36+
5937</Showcase >
6038
6139### Textarea with characters counter
@@ -64,15 +42,8 @@ The Textarea component provides the option to display a character count, allowin
6442
6543<Showcase showcase-name =" Textarea/TextareaCharacters " >
6644
67- :: vue-only
68- <<<../../../preview/nuxt/pages/showcases/Textarea/TextareaCharacters.vue
69- ::
70- :: react-only
71- <<<../../../preview/next/pages/showcases/Textarea/TextareaCharacters.tsx
72- ::
73- :: qwik-only
7445<<<../../../website/src/routes/showcases/Textarea/TextareaCharacters/index.tsx
75- ::
46+
7647</Showcase >
7748
7849### Textarea with autoresize
@@ -81,20 +52,15 @@ The Textarea component supports autoresizing based on the content entered by the
8152
8253<Showcase showcase-name =" Textarea/TextareaAutoresize " >
8354
84- :: vue-only
85- <<<../../../preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue
86- ::
87- :: react-only
88- <<<../../../preview/next/pages/showcases/Textarea/TextareaAutoresize.tsx
89- ::
90- :: qwik-only
9155<<<../../../website/src/routes/showcases/Textarea/TextareaAutoresize/index.tsx
92- ::
56+
9357</Showcase >
9458
59+ <!--
9560## Accessibility notes
9661
9762Textarea is multi-line input, so Return or Enter key inserts a line break.
63+ -->
9864
9965## Playground
10066
@@ -104,46 +70,10 @@ Textarea is multi-line input, so Return or Enter key inserts a line break.
10470
10571## Props
10672
107- :: vue-only
108- | Prop name | Type | Default value | Possible values |
109- | ------------ | -------- | ------------- | -------------------------------------- |
110- | ` size ` | ` SfInputSize ` | ` 'base' ` | ` 'sm' ` , ` 'base' ` , ` 'lg' ` |
111- | ` invalid ` | ` boolean ` | ` false ` |
112- ::
113-
114- :: react-only
115- | Prop name | Type | Default value | Possible values |
116- | ------------ | -------- | ------------- | -------------------------------------- |
117- | ` size ` | ` SfInputSize ` | ` 'base' ` | ` 'sm' ` , ` 'base' ` , ` 'lg' ` |
118- | ` invalid ` | ` boolean ` | ` false ` |
119- | ` className ` | ` string ` | |
120- ::
121-
122- :: qwik-only
123- | Prop name | Type | Default value | Possible values |
124- | ------------ | -------- | ------------- | -------------------------------------- |
125- | ` size ` | ` SfInputSize ` | ` 'base' ` | ` 'sm' ` , ` 'base' ` , ` 'lg' ` |
126- | ` invalid ` | ` boolean ` | ` false ` |
127- | ` className ` | ` string ` | |
128- ::
129-
130- :: vue-only
131-
132- ## Events
133-
134- | Event name | Trigger |
135- | ------------------- | ----------------------------- |
136- | ` update:modelValue ` | triggers v-model update event |
137-
138- ::
139-
140- #tab-3
141-
142- :: vue-only
143- <<<../../../../packages/sfui/frameworks/vue/components/SfTextarea/SfTextarea.vue
144- ::
145- :: react-only
146- <<<../../../../packages/sfui/frameworks/react/components/SfTextarea/SfTextarea.tsx
147- ::
148-
149- ::
73+ | Prop name | Type | Default value | Possible values |
74+ | --------------- | -------------------------------------- | ------------- | ------------------------ |
75+ | ` onInput$? ` | ` PropFunction<(event: Event) => void> ` | | |
76+ | ` size? ` | ` SfInputSize ` | ` 'base' ` | ` 'sm' ` , ` 'base' ` , ` 'lg' ` |
77+ | ` invalid? ` | ` boolean ` | | |
78+ | ` wrapperClass? ` | ` string[] ` | | |
79+ | ` style? ` | ` CSSProperties ` | | |
0 commit comments