Examples
Copy-ready headless input patterns for real application flows. Each panel includes the matching source files and a StackBlitz link in the panel actions for quick verification outside the docs.
Start from the Plain-CSS StackBlitz starter or the Tailwind StackBlitz starter if you want a runnable sandbox first. The Plain-CSS tabs now use self-contained CSS, so the shown files can be pasted directly into a standalone Angular app.
Global search field
A grouped search field with a projected search icon and keyboard-hint suffix. The shown files are ready to paste into a standalone Angular app.
Global search field (Plain-CSS)
Global search field (Tailwind CSS)
Workspace slug field
A settings-style slug field with a fixed domain suffix. Useful for workspace, subdomain, or tenant setup flows.
Workspace slug field (Plain-CSS)
Workspace slug field (Tailwind CSS)
Validation feedback
A validation pattern that keeps the input primitive headless while pairing it with explicit helper text.
Validation feedback (Plain-CSS)
Enter a valid email address in user@domain format.
Validation feedback (Tailwind CSS)
Enter a valid email address in user@domain format.
Readonly and disabled states
Readonly and disabled field treatments for admin and settings flows where the control remains visible but not editable.