Elastic Segmented Control
Compact product modes with radio semantics and arrow-key selection.
Independent value-selection semantics; Fluid Tabs owns navigation between panels.
Selected: photo
forms
Interaction for real content and products.
Media inspection, tactile form controls, lightweight data interaction and anchored contextual surfaces—without replacing native semantics or pulling in a platform-sized dependency.
02 · Forms
Feedback and focus before flourish.
Morph Select
A short labeled listbox with arrows, Enter, Escape and typeahead.
Export quality
Tactile Range
A native precision control with a quiet spring thumb and visible value.
Smart Dropzone
Select local image files and validate them—no fake backend upload claim.
Hold to Confirm
Reserved for a rare consequential action; early release cancels.
Not confirmed.
Inline Edit Morph
A profile value becomes a focused editor; Enter saves and Escape cancels.
Use Inline Edit Field for the complete product field; this route keeps the focused morph composition.
Profile
Display name
Inline Edit Field
The value, help text and save path stay attached to one product field.
Workspace name
Shown to collaborators in the workspace switcher.
Expanding Search
A compact intent trigger opens a focused query without sending the user to another page.
Validation Field
Invalid, correcting and valid are readable states with the field still in place.
A local example; no request is sent.
Not checked
Progressive Form
Completed sections condense into context while the next useful decision opens.
Section 1 of 3
Identity
Name the project.
Up next
AudienceChoose who sees it next.
04 · Composition & editing
Inputs that change shape as intent becomes clear.
These systems keep the original field, the next decision and the editing context close together.
Morphing Input
A compact value surface becomes a focused editor without losing its source identity.
Expandable Composer
A one-line prompt grows into a multiline editing surface with attached tools.
↵
Token Field
Confirmed values wrap as real tokens while the next value remains ready to type.
Design
Motion
Press Enter or comma to keep a value. Backspace removes the previous token.
Multi-Value Builder
Property, operator and value stay coordinated as one compact condition authoring surface.
Smart Suggestion Field
Typed text stays raw until a visible suggestion is explicitly accepted.
A suggestion is proposed, never silently substituted.
Inline Command Field
Slash commands become removable content tokens instead of opening a navigation palette.
Commands become visible tokens inside the composition, separate from navigation commands.
05 · Context & validation
Reveal only the context the next decision needs.
Progressive Disclosure Field
Choosing shipping reveals the address fields in the same document flow.
Editable Property Rail
One property at a time becomes an editor while the object context remains stable.
NameNorth star
StatusIn review
PriorityHigh
Contextual Formatting Bar
Select a phrase in the note to reveal formatting tools attached to that selection.
Handoff note
Select a phrase to shape its emphasis.
Select text to reveal the attached tools. No floating editor is created outside the field.
06 · Adjustable values
Precision can still feel tactile.
Unit Scrubber
Drag the bounded surface or type a precise number; both paths update the same unit value.
Corner radius24 px
drag to adjust0–64 px
pxdirect value · arrows
Range Composer
Two endpoints share one track and remain ordered while either value changes.
Segmented Input Composer
One date value is entered through three labelled, keyboard-connected segments.