Textarea

<sc-textarea></sc-textarea>

This component let users create textarea.

Preview

<sc-textarea name="first_name" label="Description" placeholder="Enter your description"></sc-textarea>

Code

Component Codex

Properties

Property	Description	Type	Default
autocapitalize	The textarea's autocapitalize attribute.	"characters" | "none" | "off" | "on" | "sentences" | "words"
autocomplete	The textarea's autocomplete attribute.	string
autocorrect	The textarea's autocorrect attribute.	string
autofocus	The textarea's autofocus attribute.	boolean
disabled	Disables the textarea.	boolean	false
enterkeyhint	The input's enterkeyhint attribute. This can be used to customize the label or icon of the Enter key on virtual keyboards.	"done" | "enter" | "go" | "next" | "previous" | "search" | "send"
filled	Draws a filled textarea.	boolean	false
help	The textarea's help text. Alternatively, you can use the help-text slot.	string	''
inputmode	The textarea's inputmode attribute.	"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"
invalid	This will be true when the control is in an invalid state. Validity is determined by props such as `type`, `required`, `minlength`, and `maxlength` using the browser's constraint validation API.	boolean	false
label	The textarea's label. Alternatively, you can use the label slot.	string	''
maxlength	The maximum length of input that will be considered valid.	number
minlength	The minimum length of input that will be considered valid.	number
name	The textarea's name attribute.	string
placeholder	The textarea's placeholder text.	string
readonly	Makes the textarea readonly.	boolean	false
required	Makes the textarea a required field.	boolean	false
resize	Controls how the textarea can be resized.	"auto" | "none" | "vertical"	'vertical'
rows	The number of rows to display by default.	number	4
showLabel	Should we show the label	boolean	true
size	The textarea's size.	"large" | "medium" | "small"	'medium'
spellcheck	Enables spell checking on the textarea.	boolean
value	The textarea's value attribute.	string	''

Events

Event	Description	Type
scBlur		CustomEvent<void>
scChange		CustomEvent<void>
scFocus		CustomEvent<void>
scInput		CustomEvent<void>

Methods

reportValidity() => Promise<boolean>

Checks for validity and shows the browser's validation message if the control is invalid.

triggerFocus(options?: FocusOptions) => Promise<void>

Sets focus on the input.

Shadow Parts

Part	Description
base	The elements base wrapper.
form-control	The form control wrapper.
form-control-input
help-text	Help text that describes how to use the input.
input	The html input element.
label	The input label.
textarea

Used By

• sc-cancel-survey

Uses

• sc-form-control