Koyo Input

DraftKoyo-owned

Koyo Input documents text entry fields, Koyo focus/error states, disabled states, selection styling, and file affordances.

Reference scope

Base/store input nodes are reference only for field anatomy and browser behavior.

Variants

Implemented variants and confirmed Figma notes; uncertain mapping details stay explicit.

TextSearchDisabledInvalidFileWith leading or trailing content

Token Notes

Token decisions that should stay visible while the catalog is migrated.

Figma state variants include Empty, Placeholder, Value, Focus, Error, Error Focus, and Disabled.
Figma size variants include Regular, Large, Small, and Mini.
Decoration booleans map to leading/trailing slots and prepend/append text examples.
Normal focus uses the shared Koyo brand border/ring layer; invalid states should be driven through aria-invalid so product forms can share focus-error behavior.
This is a partial form-control migration: focus/error states are tokenized, while full Figma sizing and decoration parity remains pending.

Code Targets

Files the docs entry points at today, ready for later catalog linking.

Figma Mapping

Base/store nodes are reference only. The Koyo component is the docs and implementation target.

Page: Input & Input Group (842:49172)
Base/store reference: Frame Input & Input Group (279:98539), component sets Input (16:1738) and .Input Decoration (1702:9726)
Koyo-owned target: Second Input & Input Group frame (3468:16500), component sets Input (3468:16506) and .Input Decoration (3468:17087)
Confidence: high