Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

File Upload overview

The tngFileUpload directive turns any block-level element into an accessible drag-and-drop zone. It handles drag lifecycle tracking, file validation, and host-attribute reflection without imposing any markup structure or visual opinion.

Imports

Add the directive to your component's imports array.

Directive import

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

Usage patterns

Apply tngFileUpload to any container element. Bind accept, multiple, and maxSize to control validation, then listen to filesSelected and filesRejected for results.

Basic usage

html
<div
  tngFileUpload
  accept=".png,.jpg,.pdf"
  [multiple]="true"
  [maxSize]="5 * 1024 * 1024"
  (filesSelected)="onFilesSelected($event)"
  (filesRejected)="onFilesRejected($event)"
>
  Drop files here or click to browse
</div>

Style variants

Drop zone with drag-state feedback rendered in Plain-CSS and Tailwind styling.

Drop zone (Plain CSS)

Drop files herePNG, JPG, PDF · max 5 MB

Accessibility baseline

  • The directive sets no role or tabindex. Wrap the drop zone in a <label> or pair it with a visually hidden <input type="file"> to ensure keyboard-accessible file picking.
  • Use aria-label or an associated <label> to communicate drop-zone purpose and accepted file types to assistive technology.
  • Communicate rejection reasons visually and programmatically — an aria-live region works well for announcing validation failures.
  • Nested content inside the drop zone (icons, labels, hint text) is supported. Keep decorative children in the DOM for layout, and rely on data-dragging on the host for active drag feedback.