Web Components - text area

A text-area is a graphic user-interface element that provides a region where users can input, edit or display text that extends over multiple lines.

This component is an implementation of an HTML textarea element as a form-connected Web Component.

Set-up

import { provideDesignSystem, alphaTextArea } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaTextArea());

Attributes

You can define the following attributes in an <alpha-text-area>.

Name	Type	Description
appearance	string	Changes the general view of the element; this can be filled or outline
autofocus	boolean	When true, the component will be focused when the page has finished loading
cols	boolean	Defines the size of the element horizontally. Default: 20
disabled	boolean	Similar to readonly, but with a blur on the component
form	string	Associates this component to a form. Form id needs to be passed. If no Id informed, then it will be associated with the ancestor form
maxlength	number	The maximum number of characters allowed
minlength	number	The minimum number of characters allowed
name	string	Defines the name of the element
placeholder	string	Sets placeholder text for the element, which disappears when the user starts inputting
readonly	boolean	If true, the user cannot change the value of this field
resize	string	Allows the user to resize the element; this can be horizontal. Default: none
row	number	Defines the size of the element vertically. Default: 2

These attributes must be defined alongside the declaration of the component.

Usage

All examples below use the alpha-design-system. If you are using any other design system, change the declaration of this component accordingly.

• Example 1: a text-area with 5 rows and 20 columns, which the user cannot resize

Example 1

<alpha-text-area rows="5" cols="20" resize="none">text-area</alpha-text-area>

• Example 2: a text-area that is in focus, and which displays the placeholder text This is a placeholder

Example 2

<alpha-text-area placeholder="This is a placeholder" autofocus>Name</alpha-text-area>

• Example 3: a text-area that displays placeholder text, which the user is unable to change

Example 3

<alpha-text-area disabled placeholder="you can't touch me">Name</alpha-text-area>

Get the user input

Once the value has been input, you need to make it accessible to your application.

1. Create an @observable variable where you want to use this value:

import {... , observable} from '@microsoft/fast-element';
...
export class TEMPLATE extends FASTElement {
...
@observable text_area: string
...
}

2. Use the sync function to insert the value from the component into the variable text_area:

import {sync} from '@genesislcap/foundation-utils';
...
    ...
        <alpha-text-area value=${sync((x) => x.text_area)}>TEXT</alpha-text-area>
    ...
...    

From this point, you can access the value of the component in your application.

Try yourself

Live Editor

<alpha-text-area placeholder="yourself">try</alpha-text-area>

Result

Loading...

Use cases

• Comments
• Descriptions
• Multi-line text inputs
• Complex searches