Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Examples

Copy-ready headless input-group patterns for practical field shells. Each example keeps the grouped surface primitive-first while owning the projected prefix, control, and suffix markup directly.

Start from the Plain-CSS StackBlitz starter or the Tailwind StackBlitz starter if you want a runnable sandbox first. The Plain-CSS tabs are self-contained, so the shown files can be pasted directly into a standalone Angular app.

Search command 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.

Search command field (Plain-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)

Clear action field

A grouped query field with an owned trailing action button. This is the simplest way to add lightweight command or search reset behavior around the primitive shell.

Clear action field (Plain-CSS)