Form

Field

A form row — label, control, hint and error — with ids and ARIA wired for you.

Features7

API

Theming

Basic

Label, control and hint. The field gives the input an id, points the label at it and adds the hint to its aria-describedby.

Workspace name

Shown in the sidebar and in invites.

Horizontal

layout="horizontal" puts the label on the left — for settings pages. Below 40rem it stacks again.

8 lines

<form class="form" [formGroup]="form">  <tx-field label="Display name" layout="horizontal">    <input txInput formControlName="name" [fluid]="true" />  </tx-field>  <tx-field label="Time zone" layout="horizontal" hint="Used for reports and reminders.">    <tx-select [options]="zones" formControlName="zone" />  </tx-field></form>

Controls

Works with every control: input, textarea, select, multi select, country select, date picker, number, chips, password, an icon field or an input group — the field finds the focusable element inside.

Website

https://

Role

Skills

Country

Start date

Hours per week

Tags

Press Enter after each tag.

Password

About

A few words for your profile.

44 lines

<div class="form">  <tx-field label="Search">    <tx-icon-field [fluid]="true">      <tx-input-icon icon="search" />      <input txInput placeholder="Pages, people, files" />    </tx-icon-field>  </tx-field>  <tx-field label="Website">    <tx-input-group [fluid]="true">      <tx-input-group-addon>https://</tx-input-group-addon>      <input txInput placeholder="example.com" />    </tx-input-group>  </tx-field>  <tx-field label="Role">    <tx-select [options]="roles" placeholder="Choose a role" />  </tx-field>  <tx-field label="Skills">    <tx-multiselect [options]="skills" placeholder="Pick skills" />  </tx-field>  <tx-field label="Country">    <tx-country-select placeholder="Choose a country" />  </tx-field>  <tx-field label="Start date">    <tx-datepicker placeholder="Pick a date" [showIcon]="true" [fluid]="true" />  </tx-field>  <tx-field label="Hours per week">    <tx-input-number      placeholder="1–60"      [showButtons]="true"      [min]="1"      [max]="60"      [fluid]="true"    />  </tx-field>  <tx-field label="Tags" hint="Press Enter after each tag.">    <tx-chips-input placeholder="Add a tag" />  </tx-field>  <tx-field label="Password">    <tx-password [toggleMask]="true" [fluid]="true" autocomplete="new-password" />  </tx-field>  <tx-field label="About" hint="A few words for your profile.">    <textarea txTextarea rows="3" [fluid]="true"></textarea>  </tx-field></div>

Validation

The error comes from the projected formControlName — no [control] needed. Submit marks the form touched.

15 lines

<form class="form" [formGroup]="form" (ngSubmit)="submit()">  <div class="email">    <tx-field label="Email" [required]="true">      <input txInput type="email" autocomplete="off" formControlName="email" [fluid]="true" />    </tx-field>    <tx-email-suggestion [value]="email()" (applied)="form.controls.email.setValue($event)" />  </div>  <tx-field label="Team size" [required]="true">    <tx-select [options]="sizes" formControlName="size" placeholder="Choose" />  </tx-field>  <button txButton type="submit">Continue</button>  @if (isSent()) {    <tx-message severity="success" icon="check-circle" text="Thanks — we will be in touch." />  }</form>

Server error

errorText shows an error from outside the form — usually the server — and turns the control red until you clear it.

Subdomain

Try “docs” — it is taken.

11 lines

<div class="form">  <tx-field label="Subdomain" hint="Try “docs” — it is taken." [errorText]="serverError()">    <input      txInput      [formControl]="subdomain"      [fluid]="true"      (input)="serverError.set(undefined)"    />  </tx-field>  <button txButton [loading]="isChecking()" (click)="check()">Check</button></div>

Success

successText confirms a valid value once the user has touched the control.

Username

5 lines

<div class="form">  <tx-field label="Username" successText="Available" [messages]="messages">    <input txInput [formControl]="username" placeholder="At least 3 letters" [fluid]="true" />  </tx-field></div>

Design tokens

[dt] changes the field tokens — here a narrower label column.

City

Postal code

8 lines

<div class="form">  <tx-field label="City" layout="horizontal" [dt]="tokens">    <input txInput [fluid]="true" />  </tx-field>  <tx-field label="Postal code" layout="horizontal" [dt]="tokens">    <input txInput [fluid]="true" />  </tx-field></div>