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

Headless FileUpload overview

tngFileUpload turns any owner-authored section-like element into a drag-and-drop drop zone. The primitive handles drag events, accept/size/multiplicity validation, and drag-state reflection while you control every visual detail.

Imports

Attach the directive directly to a div, section, or label host.

Headless import

ts
import { TngFileUploadDirective } from '@tailng-ui/primitives';

Quick drop zone

The smallest useful setup is a host element plus tngFileUpload and a filesSelected handler. Add accept, maxSize, and multiple as needed.

Minimal drop zone

html
<div
  tngFileUpload
  [accept]="'.png,.jpg,.pdf'"
  [multiple]="true"
  (filesSelected)="onFilesSelected($event)"
  (filesRejected)="onFilesRejected($event)"
>
  Drop files here
</div>

Style variants

The same primitive drop zone rendered with owner-authored Plain CSS and Tailwind shells.

Plain CSS drop zone

Drag files here or drop a batch.

Drag state: idle

Accessibility baseline

  • The directive never sets role, tabindex, or ARIA attributes, so any accessibility metadata you author on the host is preserved.
  • Drag-and-drop is pointer-only by design; pair the zone with a native file input button if you need a keyboard-accessible fallback.
  • Reflect filesRejected reasons into your own status text so assistive technology users learn why a file was not accepted.
  • Nested markup inside the host (hint text, icons, status rows) is supported. Style data-dragging on the host and let the primitive handle drag enter/leave across descendants.