Form

Input

A styled native input or textarea — every form API works as is.

Features7

API

Theming

Basic

With a reactive form control.

Value: —

5 lines

<tx-fluid class="stack">  <input txInput placeholder="Your name" [formControl]="name" />  <textarea txInput placeholder="About you"></textarea>  <span class="hint">Value: {{ name.value || '—' }}</span></tx-fluid>

Variants

outlined (default) or filled.

4 lines

<tx-fluid class="stack">  <input txInput placeholder="Outlined" aria-label="Outlined" />  <input txInput [variant]="'filled'" placeholder="Filled" aria-label="Filled" /></tx-fluid>

States

Native readonly and disabled — styled the same in every field.

11 lines

<tx-fluid class="stack">  <input txInput value="Read only" readonly aria-label="Read only" />  <input txInput value="Disabled" disabled aria-label="Disabled" />  <input    txInput    [variant]="'filled'"    value="Filled, disabled"    disabled    aria-label="Filled disabled"  /></tx-fluid>

Invalid

Turns red by itself once a form control is invalid and touched. [invalid] forces it.

9 lines

<tx-fluid class="stack">  <input    txInput    placeholder="Email — leave empty and click outside"    aria-label="Email"    [formControl]="email"  />  <input txInput [invalid]="true" value="Forced invalid" aria-label="Forced invalid" /></tx-fluid>

Sizes

5 lines

<tx-fluid class="stack">  <input txInput [size]="'small'" placeholder="Small" aria-label="Small" />  <input txInput placeholder="Medium" aria-label="Medium" />  <input txInput [size]="'large'" placeholder="Large" aria-label="Large" /></tx-fluid>

Fluid

Default width follows the browser; fluid (or a parent <tx-fluid>) takes the full width.

Design tokens

[dt] changes the formField tokens of one field.