Textarea

Textarea is used to collect user data that is longer than that of standard input, usually at least one sentence.

Installation

Coming soon..

Examples

Textarea


                                                        
                                                        
                                                            <co-textarea></co-textarea>

Label


                                                        
                                                        
                                                            <co-textarea label="Address"></co-textarea>

Label size varies from md to 8xl


                                                        
                                                        
                                                            <!-- The default label size is 'md' -->
                                                        <co-textarea label="Address" label-size="md"></co-textarea>

Rows


                                                        
                                                        
                                                            <!-- By default the minimum value for the 'rows' attribute is '5' -->
                                                        <!-- Textarea can only be adjusted vertically -->
                                                        <co-textarea rows="5"></co-textarea>

Value


                                                        
                                                        
                                                            <co-textarea value="Hyderabad"></co-textarea>

Using slots


                                                        
                                                        
                                                            <co-textarea optional invalid label-size="lg">
                                                            <label slot="label"> Address </label>
                                                            <p slot="helper-text"> This is address helper text </p>
                                                            <p slot="validity-msg"> This field is required </p>
                                                        </co-textarea>

Using attributes


                                                        
                                                        
                                                            <co-textarea label="Address" label-size="lg" optional invalid helper-text="Helper Text" validity-msg="This field is required">
                                                        </co-textarea>

Properties

Property	Type	Description	Usage
label	String	Label for the textarea to describe the purpose of the textarea.	label=”Label Name”
label-size	String	Label size for the textarea	label-size= ”md” \| “lg” \| “xl” \| “2xl” \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl"
optional	Boolean	To display the optional text	optional= true \| false
helper-text	String	Textarea’s helper text, that describes how to use the helper text.	helper-text= ”This is helper text”
validity-msg	String	Textarea’s validation message	validity-msg= ”This field is required”
invalid	Boolean	Controls the invalid state and visibility of the validity message	invalid= true \| false
disabled	Boolean	Controls the disable state of the textarea	disabled= true \| false
required	Boolean	To make the textarea as required field	required= true \| false
readonly	Boolean	To make the textarea as readonly	readonly= true \| false
autofocus	Boolean	Indicates that the textarea should receive focus on page load	autofocus= true \| false
minlength	Number	To specify the minimum number of characters required in the textarea field.	minlength=”1”
maxlength	Number	To specify the maximum number of characters required in the textarea field.	maxlength=”100”
rows	Number	Specifies the height of the textarea (in lines). Default value is 5.	rows=”5”
value	String	The value of the textarea	value=”John”
spellcheck	Boolean	To verify the spellcheck	spellcheck= true \| false
inputmode	String	To change the appearance of the keyboard on a phone or tablet (any device with a virtual keyboard).	inputmode= ”none” \| “text” \| “decimal” \| “numeric” \| “tel” \| “search” \| “email” \| “url”
autocomplete		It specifies whether the browser can automatically populate previously saved values from the browser or not.	autocomplete= ”on” \| “off” \| "specific value"

Slots

Developer can use either attributes mentioned in property table or use slots like below.

Name	Description	Usage
label	Label for the Textarea	slot=”label”
helper-text	Helper text for the Textarea	<p slot="helper-text”>This is slider helper text</p>
validity-msg	Validation message for the Textarea	<p slot="validity-msg”>This field is required</p>

Dependencies

This component automatically imports the following dependency.


                                                        
                                                        
                                                            <co-icon></co-icon>