@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/docs/text-field.examples.md

@@ -0,0 +1,821 @@
+<!-- index: ./index.md -->
+# text-field
+
+`data-ui="text-field"` · Single-line text input.
+
+## Examples
+
+### Playground
+
+One control with every axis on it, driven by the controls below the canvas. Type into it: the clear button appears only once there is something to clear.
+
+Excerpt — not a complete module
+
+```html
+<div slField>
+  <label slFieldLabel>E-mail</label>
+  <div slTextField clearable>
+    <input slTextFieldInput type="email" placeholder="voce@empresa.com.br" />
+  </div>
+  <span slFieldDescription>Usaremos este endereço para a cobrança.</span>
+</div>
+```
+
+### The step the control sits at
+
+Three steps, and inside a field the control takes the field’s rather than its own: a small field holding a medium control is a field and a control disagreeing about one row.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput, SlTextFieldStart } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-sizes',
+  imports: [SlGlyph, SlIcon, SlStack, SlTextField, SlTextFieldInput, SlTextFieldStart],
+  template: `
+    <div slStack [gap]="4">
+      <div slTextField size="sm">
+        <span slTextFieldStart>
+          <span slIcon><svg slGlyph name="search"></svg></span>
+        </span>
+        <input
+          slTextFieldInput
+          type="search"
+          aria-label="Filter order lines"
+          placeholder="Filter order lines"
+        />
+      </div>
+      <div slTextField size="md">
+        <span slTextFieldStart>
+          <span slIcon><svg slGlyph name="search"></svg></span>
+        </span>
+        <input
+          slTextFieldInput
+          type="search"
+          aria-label="Search customers"
+          placeholder="Search customers"
+        />
+      </div>
+      <div slTextField size="lg">
+        <span slTextFieldStart>
+          <span slIcon><svg slGlyph name="search"></svg></span>
+        </span>
+        <input
+          slTextFieldInput
+          type="search"
+          aria-label="Search the catalog"
+          placeholder="Search the catalog"
+        />
+      </div>
+    </div>
+  `,
+})
+export class TextFieldSizes {}
+```
+
+### How much frame the control shows
+
+outline takes the ground it is placed on, subtle sinks into the page, and plain shows nothing until the pointer or the caret arrives — which is what a dense table cell needs.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-variants',
+  imports: [SlField, SlFieldLabel, SlStack, SlTextField, SlTextFieldInput],
+  template: `
+    <div slStack [gap]="4">
+      <div slField>
+        <label slFieldLabel>Customer</label>
+        <div slTextField variant="outline">
+          <input slTextFieldInput defaultValue="Northwind Traders" />
+        </div>
+      </div>
+      <div slField>
+        <label slFieldLabel>Purchase order</label>
+        <div slTextField variant="subtle">
+          <input slTextFieldInput defaultValue="PO-2026-0412" />
+        </div>
+      </div>
+      <div slField>
+        <label slFieldLabel>SKU</label>
+        <div slTextField variant="plain" mono>
+          <input slTextFieldInput defaultValue="NW-TEA-1042" />
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TextFieldVariants {}
+```
+
+### What sits inside the border
+
+start and end name the reading direction rather than a side, so the currency mark stays before the amount in Arabic as well. Neither of them is ever squeezed: the value gives up width first.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlKbd } from '@slotted/angular/kbd';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTextField,
+  SlTextFieldEnd,
+  SlTextFieldInput,
+  SlTextFieldStart,
+} from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-adornments',
+  imports: [
+    SlField,
+    SlFieldLabel,
+    SlGlyph,
+    SlIcon,
+    SlKbd,
+    SlStack,
+    SlTextField,
+    SlTextFieldEnd,
+    SlTextFieldInput,
+    SlTextFieldStart,
+  ],
+  template: `
+    <div slStack [gap]="4">
+      <div slField>
+        <label slFieldLabel>Unit price</label>
+        <div slTextField>
+          <span slTextFieldStart>$</span>
+          <input slTextFieldInput inputmode="decimal" defaultValue="24.90" />
+          <span slTextFieldEnd>USD</span>
+        </div>
+      </div>
+      <div slField>
+        <label slFieldLabel>Shipping weight</label>
+        <div slTextField>
+          <input slTextFieldInput inputmode="decimal" defaultValue="1.25" />
+          <span slTextFieldEnd>kg</span>
+        </div>
+      </div>
+      <div slField>
+        <label slFieldLabel>Storefront address</label>
+        <div slTextField>
+          <span slTextFieldStart>https://</span>
+          <input slTextFieldInput defaultValue="shop.northwind.com" />
+        </div>
+      </div>
+      <div slTextField>
+        <span slTextFieldStart>
+          <span slIcon><svg slGlyph name="search"></svg></span>
+        </span>
+        <input
+          slTextFieldInput
+          type="search"
+          aria-label="Search orders"
+          placeholder="Search orders"
+        />
+        <span slTextFieldEnd><kbd slKbd>/</kbd></span>
+      </div>
+    </div>
+  `,
+})
+export class TextFieldAdornments {}
+```
+
+### The two buttons the frame draws
+
+Both are real buttons inside the frame, both keep the caret, and both are held to the 24-pixel minimum. Tab into the field and press Tab again: the ring moves to the button rather than staying around the box.
+
+Excerpt — not a complete module
+
+```html
+<div slTextField clearable>
+  <input slTextFieldInput type="search" defaultValue="nota fiscal 2026" />
+</div>
+
+<div slTextField revealable>
+  <input slTextFieldInput type="password" autocomplete="current-password" />
+</div>
+```
+
+### A button of your own inside the frame
+
+A country code that opens a menu, a category beside a search, a submit named in words, an overflow mark: each is a real button in start or end. Open one — it stays pressed while its menu is open, and the value keeps its place beside it.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger } from '@slotted/angular/menu';
+import {
+  SlTextField,
+  SlTextFieldAction,
+  SlTextFieldInput,
+  SlTextFieldStart,
+} from '@slotted/angular/text-field';
+import { SlVisuallyHidden } from '@slotted/angular/visually-hidden';
+
+@Component({
+  selector: 'app-text-field-menu',
+  imports: [
+    SlField,
+    SlFieldLabel,
+    SlGlyph,
+    SlIcon,
+    SlMenu,
+    SlMenuItem,
+    SlMenuRadioGroup,
+    SlMenuTrigger,
+    SlTextField,
+    SlTextFieldAction,
+    SlTextFieldInput,
+    SlTextFieldStart,
+    SlVisuallyHidden,
+  ],
+  template: `
+    <div slField>
+      <label slFieldLabel>Phone</label>
+      <div slTextField>
+        <span slTextFieldStart>
+          <button slTextFieldAction [slMenuTriggerFor]="countries">
+            <span slVisuallyHidden>Country code</span>{{ country() }}
+            <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+          </button>
+        </span>
+        <input
+          slTextFieldInput
+          type="tel"
+          autocomplete="tel-national"
+          defaultValue="206 555 0134"
+        />
+      </div>
+      <sl-menu #countries>
+        <sl-menu-radio-group [(value)]="country">
+          <button slMenuRadioItem value="+1">United States +1</button>
+          <button slMenuRadioItem value="+44">United Kingdom +44</button>
+          <button slMenuRadioItem value="+49">Germany +49</button>
+          <button slMenuRadioItem value="+81">Japan +81</button>
+        </sl-menu-radio-group>
+      </sl-menu>
+    </div>
+  `,
+})
+export class TextFieldMenu {
+  protected readonly country = signal('+1');
+}
+```
+
+### Copying a value somebody has to paste elsewhere
+
+Press the copy button: the mark turns to a check in the success ink for two seconds and the outcome is announced. A clipboard that refuses — an insecure page, a denied permission — is announced as a failure and shows no check.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-copy',
+  imports: [SlField, SlFieldDescription, SlFieldLabel, SlStack, SlTextField, SlTextFieldInput],
+  template: `
+    <div slStack [gap]="5">
+      <div slField>
+        <label slFieldLabel>Invite link</label>
+        <div slTextField copyable>
+          <input
+            slTextFieldInput
+            readonly
+            defaultValue="https://northwind.slotted.app/join/8f3a2c"
+          />
+        </div>
+        <span slFieldDescription>Anyone with the link joins as a viewer.</span>
+      </div>
+      <div slField>
+        <label slFieldLabel>Webhook signing secret</label>
+        <div slTextField copyable mono>
+          <input slTextFieldInput readonly defaultValue="whsec_4f9c2a7e1b8d6350" />
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TextFieldCopy {}
+```
+
+### A password: showing it, and warning about Caps Lock
+
+Focus the password and turn Caps Lock on: the warning mark appears before the eye and is announced once. The eye swaps to a crossed eye and back, and the caret stays where it was.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlTextField, SlTextFieldInput, SlTextFieldStart } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-password',
+  imports: [
+    SlField,
+    SlFieldDescription,
+    SlFieldLabel,
+    SlGlyph,
+    SlIcon,
+    SlTextField,
+    SlTextFieldInput,
+    SlTextFieldStart,
+  ],
+  template: `
+    <div slField required>
+      <label slFieldLabel>New password</label>
+      <div slTextField revealable>
+        <span slTextFieldStart>
+          <span slIcon><svg slGlyph name="lock"></svg></span>
+        </span>
+        <input slTextFieldInput type="password" autocomplete="new-password" minlength="12" />
+      </div>
+      <span slFieldDescription>At least 12 characters.</span>
+    </div>
+  `,
+})
+export class TextFieldPassword {}
+```
+
+### Checking the value while the reader keeps typing
+
+A user name checked against the server: the ring stands before the buttons and the input is aria-busy, but it stays editable. Turn loading off and the ring shrinks out rather than vanishing.
+
+Example
+
+```ts
+import { Component, DestroyRef, inject, signal } from '@angular/core';
+import { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlTextField, SlTextFieldInput, SlTextFieldStart } from '@slotted/angular/text-field';
+
+/** Stands in for the request that checks whether a handle is free. */
+const TAKEN = new Set(['admin', 'northwind', 'support']);
+
+@Component({
+  selector: 'app-text-field-loading',
+  imports: [
+    SlField,
+    SlFieldDescription,
+    SlFieldError,
+    SlFieldLabel,
+    SlTextField,
+    SlTextFieldInput,
+    SlTextFieldStart,
+  ],
+  template: `
+    <div slField [invalid]="taken() ? true : undefined">
+      <label slFieldLabel>Handle</label>
+      <div slTextField clearable [loading]="checking()">
+        <span slTextFieldStart>&#64;</span>
+        <input
+          slTextFieldInput
+          autocomplete="username"
+          spellcheck="false"
+          [value]="handle()"
+          (valueChange)="change($event.value)"
+        />
+      </div>
+      <span slFieldDescription>Lowercase letters, digits and hyphens.</span>
+      <span slFieldError live="polite" reserve>
+        {{ taken() ? '@' + handle() + ' is already taken.' : '' }}
+      </span>
+    </div>
+  `,
+})
+export class TextFieldLoading {
+  protected readonly handle = signal('northwind-ops');
+  protected readonly checking = signal(false);
+  protected readonly taken = signal(false);
+  private timer: ReturnType<typeof setTimeout> | undefined;
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+  }
+
+  protected change(next: string) {
+    this.handle.set(next);
+    this.taken.set(false);
+    clearTimeout(this.timer);
+    this.checking.set(next !== '');
+    if (next === '') return;
+    this.timer = setTimeout(() => {
+      this.checking.set(false);
+      this.taken.set(TAKEN.has(next));
+    }, 900);
+  }
+}
+```
+
+### The four states the frame paints
+
+Read-only keeps full-strength ink and only its ground changes, because the value is real and still submitted; disabled is muted to a measured colour rather than faded, so a disabled form still says what it holds.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-states',
+  imports: [
+    SlField,
+    SlFieldDescription,
+    SlFieldError,
+    SlFieldLabel,
+    SlStack,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slStack [gap]="5">
+      <div slField invalid>
+        <label slFieldLabel>VAT number</label>
+        <div slTextField><input slTextFieldInput defaultValue="DE 81234" /></div>
+        <span slFieldError>A German VAT number has nine digits after DE.</span>
+      </div>
+      <div slField readOnly>
+        <label slFieldLabel>Order number</label>
+        <div slTextField mono><input slTextFieldInput defaultValue="SO-2026-00418" /></div>
+        <span slFieldDescription>Assigned when the order was placed.</span>
+      </div>
+      <div slField disabled>
+        <label slFieldLabel>Currency</label>
+        <div slTextField><input slTextFieldInput defaultValue="USD" /></div>
+        <span slFieldDescription>Set by the customer’s price list.</span>
+      </div>
+    </div>
+  `,
+})
+export class TextFieldStates {}
+```
+
+### Counting what has been typed
+
+The control counts and the field places it, in the spare column of the label row. Pass countMax without maxlength and the limit becomes a soft one: the value may pass it, and the counter turns before validation runs.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-count',
+  imports: [SlField, SlFieldDescription, SlFieldLabel, SlStack, SlTextField, SlTextFieldInput],
+  template: `
+    <div slStack [gap]="5">
+      <div slField>
+        <label slFieldLabel>Email subject</label>
+        <div slTextField>
+          <input
+            slTextFieldInput
+            showCount
+            maxlength="60"
+            defaultValue="Your order SO-2026-00418 has shipped"
+          />
+        </div>
+      </div>
+      <div slField>
+        <label slFieldLabel>SMS sender name</label>
+        <div slTextField>
+          <input slTextFieldInput showCount countMax="11" defaultValue="Northwind" />
+        </div>
+        <span slFieldDescription>Carriers cut sender names after 11 characters.</span>
+      </div>
+    </div>
+  `,
+})
+export class TextFieldCount {}
+```
+
+### What kind of text this is
+
+type is the element’s own, and so is everything that travels with it. A phone field that offers the wrong keyboard on a phone is a field nobody fills in twice.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-types',
+  imports: [SlField, SlFieldLabel, SlStack, SlTextField, SlTextFieldInput],
+  template: `
+    <div slStack [gap]="4">
+      <div slField>
+        <label slFieldLabel>Work email</label>
+        <div slTextField>
+          <input
+            slTextFieldInput
+            type="email"
+            autocomplete="email"
+            placeholder="name@northwind.com"
+          />
+        </div>
+      </div>
+      <div slField>
+        <label slFieldLabel>Phone</label>
+        <div slTextField>
+          <input slTextFieldInput type="tel" autocomplete="tel" placeholder="+1 206 555 0134" />
+        </div>
+      </div>
+      <div slField>
+        <label slFieldLabel>Website</label>
+        <div slTextField>
+          <input
+            slTextFieldInput
+            type="url"
+            autocomplete="url"
+            placeholder="https://northwind.com"
+          />
+        </div>
+      </div>
+      <div slField>
+        <label slFieldLabel>ZIP code</label>
+        <div slTextField>
+          <input
+            slTextFieldInput
+            autocomplete="postal-code"
+            inputmode="numeric"
+            placeholder="98101"
+          />
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TextFieldTypes {}
+```
+
+### Content the family did not choose
+
+A value longer than the control ellipsises rather than clipping mid-glyph; an unbroken token scrolls, which is the platform’s answer; and at 240 pixels the value surrenders width while the adornments keep their target size.
+
+Excerpt — not a complete module
+
+```html
+<div slTextField>
+  <input slTextFieldInput defaultValue="Kraftfahrzeug-Haftpflichtversicherungsnummer" />
+</div>
+
+<!-- Nothing is removed from the DOM: the whole value stays selectable. -->
+<div slTextField clearable>
+  <input slTextFieldInput dir="rtl" defaultValue="مرحبا بالعالم" />
+</div>
+```
+
+### Setting it once, and reaching past it
+
+provideTextFieldDefaults carries the decisions an application takes once; exportAs reaches the instance, and inputElement is the native element with focus, select and setSelectionRange already on it.
+
+Excerpt — not a complete module
+
+```html
+<!-- ControlValueAccessor: the control belongs in a form as it stands. -->
+<div slTextField clearable>
+  <input slTextFieldInput [formControl]="email" type="email" />
+</div>
+
+<!-- exportAs, for the element the template has to reach. -->
+<div slTextField>
+  <input slTextFieldInput #campo="slTextFieldInput" />
+  <span slTextFieldEnd>
+    <button slTextFieldAction (click)="campo.inputElement.select()">Selecionar</button>
+  </span>
+</div>
+```
+
+### What the keyboard does, and what it deliberately does not
+
+Tab reaches the value, then each button in turn. Nothing is bound to Escape: some user agents clear a search input on it, and a control that swallowed the key inside a dialog would be one a keyboard user cannot leave.
+
+Excerpt — not a complete module
+
+```html
+<form (ngSubmit)="buscar()">
+  <div slTextField clearable>
+    <input slTextFieldInput type="search" name="q" [(ngModel)]="q" />
+  </div>
+</form>
+```
+
+### action.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import {
+  SlTextField,
+  SlTextFieldAction,
+  SlTextFieldEnd,
+  SlTextFieldInput,
+} from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-action',
+  imports: [
+    SlField,
+    SlFieldDescription,
+    SlFieldLabel,
+    SlTextField,
+    SlTextFieldAction,
+    SlTextFieldEnd,
+    SlTextFieldInput,
+  ],
+  template: `
+    <form (submit)="apply($event)">
+      <div slField>
+        <label slFieldLabel>Discount code</label>
+        <div slTextField mono>
+          <input slTextFieldInput name="code" autocomplete="off" defaultValue="SPRING10" />
+          <span slTextFieldEnd><button slTextFieldAction type="submit">Apply</button></span>
+        </div>
+        <span slFieldDescription>
+          {{ applied() === '' ? 'One code per order.' : applied() + ' is applied to this order.' }}
+        </span>
+      </div>
+    </form>
+  `,
+})
+export class TextFieldActionExample {
+  protected readonly applied = signal('');
+
+  protected apply(event: SubmitEvent) {
+    event.preventDefault();
+    const code = new FormData(event.target as HTMLFormElement).get('code');
+    this.applied.set(typeof code === 'string' ? code.trim().toUpperCase() : '');
+  }
+}
+```
+
+### clearable.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlTextField, SlTextFieldInput, SlTextFieldStart } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-clearable',
+  imports: [SlGlyph, SlIcon, SlTextField, SlTextFieldInput, SlTextFieldStart],
+  template: `
+    <div slTextField clearable>
+      <span slTextFieldStart>
+        <span slIcon><svg slGlyph name="search"></svg></span>
+      </span>
+      <input
+        slTextFieldInput
+        type="search"
+        aria-label="Search invoices"
+        enterkeyhint="search"
+        defaultValue="invoice 2026"
+      />
+    </div>
+  `,
+})
+export class TextFieldClearable {}
+```
+
+### defaults.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlGrid } from '@slotted/angular/grid';
+import {
+  provideTextFieldDefaults,
+  SlTextField,
+  SlTextFieldInput,
+} from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-text-field-defaults',
+  imports: [SlGrid, SlTextField, SlTextFieldInput],
+  providers: [provideTextFieldDefaults({ size: 'sm', variant: 'subtle' })],
+  template: `
+    <div slGrid [gap]="2" minItemWidth="xs">
+      <div slTextField clearable>
+        <input slTextFieldInput aria-label="Customer" placeholder="Customer" />
+      </div>
+      <div slTextField mono>
+        <input slTextFieldInput aria-label="Order number" placeholder="Order number" />
+      </div>
+      <div slTextField>
+        <input slTextFieldInput aria-label="Ship to city" placeholder="Ship to city" />
+      </div>
+    </div>
+  `,
+})
+export class TextFieldDefaults {}
+```
+
+### validation.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { SlButton } from '@slotted/angular/button';
+import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+@Component({
+  selector: 'app-text-field-validation',
+  imports: [
+    ReactiveFormsModule,
+    SlButton,
+    SlField,
+    SlFieldError,
+    SlFieldLabel,
+    SlInline,
+    SlStack,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <form novalidate (submit)="submit($event)">
+      <div slStack [gap]="4">
+        <div slField required [invalid]="error() !== '' ? true : undefined">
+          <label slFieldLabel>Billing email</label>
+          <div slTextField>
+            <input
+              slTextFieldInput
+              type="email"
+              autocomplete="email"
+              [formControl]="email"
+              (valueChange)="sent.set(false)"
+            />
+          </div>
+          <span slFieldError live="polite" reserve>{{ error() }}</span>
+        </div>
+        <div slInline [gap]="3" align="center">
+          <button slButton type="submit">Send invoice</button>
+          @if (sent()) {
+            <span role="status">Invoice sent.</span>
+          }
+        </div>
+      </div>
+    </form>
+  `,
+})
+export class TextFieldValidation {
+  readonly email = new FormControl('', {
+    nonNullable: true,
+    validators: [Validators.required, Validators.pattern(EMAIL)],
+  });
+  readonly value = toSignal(this.email.valueChanges, { initialValue: this.email.value });
+  readonly submitted = signal(false);
+  readonly sent = signal(false);
+  readonly error = computed(() => {
+    if (!this.submitted()) return '';
+    if (this.value().trim() === '') return 'Enter the address the invoice goes to.';
+    return EMAIL.test(this.value()) ? '' : 'Enter an address in the format name@company.com.';
+  });
+
+  submit(event: Event): void {
+    event.preventDefault();
+    this.submitted.set(true);
+    this.sent.set(this.email.valid);
+  }
+}
+```