TagInput

Reusable TagInput contract shared across FouadDev hosts where the workflow requires it.

Usage

Use only when the component solves the named task. Preserve existing business behavior and permissions.

Anatomy

Semantic container, visible content/label, interaction state and accessible name when interactive.

Variants & states

Default, focus, pressed/selected when applicable, disabled, loading, error, success and long-content stress.

Content

Labels are concise and action-oriented. Errors explain what happened and what to do next.

Accessibility

Keyboard reachable where interactive, visible focus, sufficient target size and no color-only meaning.

Web

Consumes semantic tokens from fouad-one-v950.css; no remote dependency.

Android

Maps to semantic resources in values/ and values-night/; 48dp touch targets.

Light / Dark

Both modes use dedicated semantic values, not inversion.

Do / Don’t

Do preserve task hierarchy. Don’t invent decorative variants or duplicate an existing action.

Tests

Keyboard, long text, 4 theme matrices, 320–1920 Web where relevant, Android font scaling when native.