Text Area

Use cases:

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

Examples

Sample text area with maxlength 20 and three rows.Sample text area with resize both set

Genesis

Declaration

<rapid-text-area></rapid-text-area>

Usage

@customElement({
name: 'my-element',
template: html`
    <rapid-text-area value=${sync((x) => x.textAreaValue)}>
      Sample Text Area
    </rapid-text-area>
  `,
})
export class MyElement extends GenesisElement {
  @observable textAreaValue = '';
  textAreaValueChanged() {
     console.log(this.textAreaValue);
  }
}

React

Declaration

<rapid-text-area></rapid-text-area>

Usage

export function MyComponent() {
  const handleTextAreaChanged = (event) => {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  };
  return (
    <rapid-text-area onChange={handleTextAreaChanged}></rapid-text-area>
  );
}

Angular

Declaration

<rapid-text-area></rapid-text-area>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
        <rapid-text-area
          (change)="onTextAreaChange($event)"
        ></rapid-text-area>
      `,
  styleUrls: ['./my.component.css'],
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  onTextAreaChange(event: Event) {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  }
}

API

Attributes:

Name	Type	Description	Example
appearance	"filled" | "outline"	Changes the general view of the element; this can be filled or outline	<text-area appearance="filled">
autofocus	boolean	When true, the component will be focused when the page has finished loading	<text-area autofocus>
cols	number	Defines the size of the element horizontally. Default: 20	<text-area cols=2>
disabled	boolean	Similar to readonly, but with a blur on the component	<text-area disabled>
formId	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	<text-area formId="formId">
maxlength	number	The maximum number of characters allowed	<text-area maxlength=100>
minlength	number	The minimum number of characters allowed	<text-area minlength=50>
name	string	Defines the name of the element	<text-area name="textAreaName">
placeholder	string	Sets placeholder text for the element, which disappears when the user starts inputting	<text-area placeholder="Sample place holder text">
readonly	boolean	If true, the user cannot change the value of this field	<text-area readonly>
resize	"none" | "both" | "vertical" | "horizontal"	Configures which ways the user can resize the text area. Default: none	<text-area resize="vertical">
rows	number	Defines the size of the element vertically. Default: 2	<text-area rows=5>
value	string	The text area content. Use the sync utility to bind the data from the template back to the model.	<text-area value=${sync((x) => x.textAreaValue)}>

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Description
start	Content before the text area input
end	Content after the text area input

Parts

Part	Description
label	The label for the text area.
control	The input for the text area
field	The text area element

Events fired

Event	Type	Use	Example
change	event	Emits a custom change event when the text area content changes. Access the value on the event via .target.value.	<rapid-text-area @change="${(x) => x.myChangeHandler(event)}">

Events listened to

This component doesn't listen to any events.

Further details

This component is an implementation of an HTML text-area element.