Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
#0A0A0ASecondary #6B6B6B
Radius
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
Compact runtime evidence across 3+ token signals.
Published DS package · Component Layer · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Palette
#0A0A0ARottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
Primitives
Inputs
Tag Input
Tag Input
Active profilePlatform Flagship
Runtime postureRottay / modern
Primitives reference for Tag Input.
Runtime controls
TenantRottay
Reference summaryMulti-value input rendered as removable tagsInput primitives should make capture, editing, and validation feel trustworthy at speed.
How to read this pageUse the showroom switchers in the sidebar to change engine and tenant, then judge this primitive in the live preview before styling around it locally.
At a glanceThe meta cards below are the quickest read on how this primitive behaves across the current runtime.
Tier
PrimitiveThe lowest reusable UI contract.
Category
InputsInteractive controls that carry most of the UX friction if they are under-designed.
Best paired with
form buildersEscalate to patterns or surfaces when workflow logic starts dominating.
This is the primary runtime verification surface for the component. Engine and tenant changes should land in the rendered DS primitive itself, not in showroom-local wrapper styling.
Preview heuristics
Compare hierarchy, spacing, and interaction feedback before any page-level styling.
The rendered primitive should carry the engine and tenant differences by itself.
If it only looks right inside local wrapper chrome, the primitive or preview needs more work.
Engine comparisonEngine comparisonThe active tenant stays real while the same component is rendered by every engine. The wrapper stays intentionally quiet so engine differences come from the DS itself.
Rottay
3 live engines
Same tenant, isolated engine
ClassicAnt Design
Live provider
ModernDaisyUI
Live provider
Consumption
Import and usage
Keep the primitive contract visible. These snippets are meant to help teams consume the base component before they wrap or escalate it.Browse all Inputs
Adoption postureStart with TagInput, not a wrapperImport directly from the design system package, verify the base behavior across 3 engines here, and only wrap when workflow logic starts repeating.
The primitive should stay legible before any page-specific chrome is layered on top.
Usage notes
Import directly from the design system package and keep composition simple first.
Use category-appropriate props before creating wrapper APIs that hide the base contract.
Escalate to patterns or surfaces only when workflow logic clearly outweighs local UI concerns.
Published entrypoint@rottay/design-systemUse the shared package surface as the default import path for TagInput. It keeps adoption readable and future extraction work straightforward.
Base tier: Inputs
API surface
Props
Curated reference for fast browsing. Verify edge-case props against the source until this table is extracted directly from the DS.
Reference scan6 documented props0 required and 6 optional rows are listed here so teams can review the contract without digging through source immediately.
Confirm uncommon edge cases against the component implementation until this table is extracted automatically.
Reference disciplineThe table below is tuned for quick scanning in docs. For unusual composition or engine-specific behavior, treat the DS source as the final authority.
TagInput propsProp contracts stay readable across dark-first and light-first tenants.
6 props
0 required
6 optional
Fast readStart with required props, then scan defaults before dropping to per-row details.
Contract postureThis reference stays intentionally concise so the primitive contract remains scannable.
Name
Optional
Optional
Optional
Optional
Optional
Optional
Related components
Continue within Inputs
If TagInput is close but not quite right, scan nearby primitives in the same tier before jumping to a heavier surface or pattern abstraction.Browse all Inputs
Next moveStay within Inputs firstCategory siblings usually solve adjacent states while preserving the same primitive contract level and runtime expectations.
Escalate to patterns or surfaces only when the interaction model itself changes.
Tags stay controlled in preview so you can test add and remove behavior.
Runtime fingerprint
Runtime
PlatformRottay
Primary
Radius
Density
Accent
Badge
Motion
Compact runtime evidence across 2+ token signals.
Note
Check focus, affordance, and whether the control still feels trustworthy when styling shifts.
InputTagInput
3 live engines
Live DS output
billingpriority
Tags stay controlled in preview so you can test add and remove behavior.
Runtime fingerprint
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
Radius
Density
Accent
Badge
Motion
Compact runtime evidence across 2+ token signals.
Note
Check focus, affordance, and whether the control still feels trustworthy when styling shifts.
RusticVanilla CSS
Live provider
InputTagInput
3 live engines
Live DS output
billingpriority
Tags stay controlled in preview so you can test add and remove behavior.
Runtime fingerprint
Runtime
Platform
Rottay
Primary
Radius
Density
Accent
Badge
Motion
Compact runtime evidence across 2+ token signals.
Note
Check focus, affordance, and whether the control still feels trustworthy when styling shifts.
EntrypointKeep imports directReach for the published DS export first so teams can read the contract at a glance.
ImportPublished package entrypoint, ready to copy.
tsx
1 line
Consumption
Runtime-aware snippet
ImportTSX
Quick copy
import { TagInput } from '@rottay/design-system';
Baseline exampleStart with TagInputUse the smallest valid composition first, then layer in product-specific wrappers only when the workflow truly needs them.
UsagePaste-ready example that shows the base contract first.