Form

ListInput

A textarea for pasting a list of domains, links, emails or ids: it parses as you type, counts duplicates and lines it does not recognize, and cleans the list up in one click.

Features7

API

Theming

Basic

type="domain" takes domains or whole URLs — protocols, paths and ports are dropped. The footer counts what was found; itemsChange gives the clean list.

Will check: —

7 lines

<tx-list-input  type="domain"  ariaLabel="Domains"  [(text)]="text"  (itemsChange)="domains.set($event)"/><p class="result">Will check: {{ domains().join(', ') || '—' }}</p>

Types

type picks the parser: email keeps valid addresses in lower case, url keeps links and adds a missing https://, text keeps every token as it is.

Not recognized

not-an-email

Not recognized

ftp://example.net

15 lines

<div class="fields">  <tx-list-input    type="email"    ariaLabel="Emails"    [rows]="3"    text="Olena@Example.com, taras@example.org&#10;olena@example.com not-an-email"  />  <tx-list-input    type="url"    ariaLabel="Links"    [rows]="3"    text="example.com/pricing&#10;https://example.org/blog?page=2 ftp://example.net"  />  <tx-list-input type="text" ariaLabel="Tags" [rows]="3" text="spring, sale; spring&#10;new" /></div>

Forms

With formControl or ngModel the value is the parsed array; setting the value from the form writes one item per line. tx-field gives it a label, a hint and errors.

Invite by email

We send one invitation to each address

Nothing sent yet

8 lines

<tx-field label="Invite by email" hint="We send one invitation to each address">  <tx-list-input type="email" [rows]="4" [formControl]="emails" /></tx-field><div class="actions">  <button txButton label="Add the team" severity="secondary" (click)="addTeam()"></button>  <button txButton label="Send invitations" (click)="send()"></button></div><p class="result">{{ status() }}</p>

parser takes your own rule: return the normalized item or null. Here order numbers keep their digits; splitByLines keeps a line with spaces as one token and countLabel names the counter with plural forms.

Not recognized

order 77

#abc

10 lines

<tx-list-input  ariaLabel="Order numbers"  placeholder="#1024, #1025 or one order per line"  hint="Paste order numbers with or without #"  countLabel="{count, plural, one {# order} other {# orders}}"  splitByLines  [rows]="4"  [parser]="orderNumber"  text="#1024&#10;1025, #1024&#10;order 77&#10;#abc"/>

States

disabled locks the field and its actions, readonly keeps the counters but hides the actions, invalid shows the error look (the form control sets it on its own).

example.com example.org

Not recognized

not

domain

11 lines

<div class="fields">  <tx-list-input type="domain" ariaLabel="Disabled" disabled [rows]="2" text="example.com" />  <tx-list-input    type="domain"    ariaLabel="Read-only"    readonly    [rows]="2"    text="example.com example.org"  />  <tx-list-input type="domain" ariaLabel="Invalid" invalid [rows]="2" text="not a domain" /></div>

Design tokens

dt changes the tokens of one instance — here a sans-serif field, a larger radius and a lower field.

10 lines

<tx-list-input  type="text"  ariaLabel="Keywords"  text="summer, sale"  [rows]="3"  [dt]="{    root: { borderRadius: '16px' },    field: { fontFamily: 'inherit', fontSize: '14px', minHeight: '80px' },  }"/>

Pass through

pt adds classes and styles to the parts: root, field, footer, stats, actions, invalid.