chatter-box-input
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Chatterbox

Chatterbox is a simple material formcontrol component text area that expands and indicates the number of chars entered or remaining.

Inputs

The following Inputs are available

Input Type Defaut Description
maxLength NUMBER INF maximum amount of chars accepted for input
minLength NUMBER 0 minimum amount of chars accepted for input
required BOOLEAN FALSE Text entry is required
label STRING NULL label for TextArea
placeholder STRING NULL placeholder text in TextArea input
counterLabel STRING NULL label for Counter
type NUMBER 1 1 is Total Count and -1 is Count Remaining
minRows NUMBER NULL Min Rows (Height) for TextArea
maxRows NUMBER NULL Max Rows (Height) for TextArea
appearence STRING NULL input style
readonly BOOLEAN false makes text for disabled state black NOT 50%

FormControl

formControlName="comments"

 countrySelection = this.fb.group({
    comments: [null],
  })

Options

Here is the minimum setup required

  <wave-chatter-box
    [maxLength]="255"
    [minLength]="0"
    [label]="'Please enter your message'"
    [placeholder]="'I need some assisstance...'"
    [counterLabel]="'Total Remaining'"
    [type]="-1"
    formControlName="chatter"
  ></wave-chatter-box>

Here is the maximum setup

<div [formGroup]="form">

  <wave-chatter-box
    [maxLength]="100"
    [minLength]="10"
    [label]="'Please enter your message'"
    [placeholder]="'I need some assisstance...'"
    [counterLabel]="'Total Characters Remaining'"
    [type]="-1"
    [minRows]="15"
    [maxRows]="15"
    appearance="outline"
    required="true"
    [readOnly]="true"
    formControlName="chatter"
  ></wave-chatter-box>

</div>

Package Sidebar

Install

npm i chatter-box-input

Weekly Downloads

4

Version

1.0.3

License

ISC

Unpacked Size

81.4 kB

Total Files

16

Last publish

Collaborators

  • wavecoders