Text Area

Example

<vega-textarea
    label="Description"
    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    min-length="1"
    max-length="100"
    auto-validation="true"
    validation-rules=object
    placeholder=""
    disabled=false
    hint="The maximum number of characters is 100"
    show-counter=true
>
</vega-textarea>

Usage

Text area fields are designed for when the user is expected to type more than one line of text.

If there is a limited amount of text that can fit into a text area field, the field will show the maximum number of characters allowed, and will show the remaining characters available in light gray.

When reaching the outer limit of characters, the border of the text area will change to an error state, and indicate the number of characters that are greater than the limit (e.g. 110/100).

Properties

Name	Description	Default
label	The label of the textarea. text	-
value	This is a preset value for a textarea. string
required	This indicates whether the vega-textarea is required. boolean	false
min-length	Sets a minimum length for the textarea. Same as minLength in native textarea. number
max-length	Sets a maximum length for the textarea. Same as maxLength in native textarea. number
auto-validation	Indicator for whether to automatically validate the user’s input. boolean	true
validation-rules	Custom validation rules youmay attach to the textarea `Array<{canEvaluate: (input: string, status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, shouldShowError: (status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, evaluate: (input: string) => EvaluateResult}>`
placeholder	A placeholder string indicating the textarea format. string
disabled	A boolean indicating if the textarea field is disabled. boolean	false
hint	A prompt message to supplement the expected value of the textarea field. string`
show-counter	Indicator for whether to show the character counter. boolean	false

All Parameters

<vega-textarea
    label="textarea-label"
    value="textarea-value"
    required="true"
    min-length="1"
    max-length="3"
    auto-validation="true"
    validation-rules=object
    placeholder=""
    disabled=false
    hint=""
    show-counter=true
>
</vega-textarea>

Validation

There are several preset validation rules that can be controlled by their respective properties.

required - If this is set to true, the input value cannot be an empty string ''.
minLength - This specifies that length cannot be less than a specified value.
maxLenth - This specifies that length cannot be greater than a specified value.

Events

There are three events associated with vega-textarea:

vegaChange is dispatched when the value of vega-textarea is changed.

document.getElementById("textarea_id").addEventListener("vegaChange", (e) => {
console.log(e.currentTarget.value) })

vegaValidate is dispatched when the validation result of vega-textarea is changed

document.getElementById("textarea_id").addEventListener("vegaValidate", (e) => {
console.log(e.currentTarget.isValid) })

vegaBlur is dispatched when vega-textarea loses focus.

document.getElementById("textarea_id").addEventListener("vegaBlur", (e) => {
console.log(e.currentTarget.value) })

For more details, view in Storybook

Accessibility

Elements must only use allowed ARIA attributes
ARIA attributes must conform to valid values
ARIA attributes must conform to valid names
Elements must have sufficient color contrast
id attribute value must be unique
Form field must not have multiple label elements
Form elements must have labels

Best Practices

Limit the number of text area fields used on a single page.

Use of labels above the input element is recommended, and clicking on the label should focus the element.