Skip to main content
TermRock
GitHub
ComponentsInputs

Component · Inputs

Form

A responsive form layout with stable focus, validation, and hit geometry.

Kind
widget
Input
interactive
Canvas
120×40

Live preview

Loading terminal preview.

Static terminal poster. Choose Run live to start the Rust demo.

Ghosttyform/responsive
Loading terminal poster…
○ loading posterNo input — rendered state only
Form · exact mounted Rust story
01 · Purpose
What it is for
A responsive form layout with stable focus, validation, and hit geometry.
Best fit: Inputs · input · widget
02 · Behavior
What the mounted story proves
  1. 01
    Form
    Representative 120×40 terminal state.
  2. 02
    Passive paint
    No keyboard or pointer action is claimed by this representative story.
  3. 03
    Evidence stays explicit
    2 covered · 9 partial · 4 missing axes.
03 · Implement
Install, then start from exact code
Install
cargo add termrock --git https://github.com/tailrocks/termrock.git --rev 5283c2acf9154d0cfcd37b1ffe821c00faf90ea2
Add TermRock once. Keep domain effects in the host application.
Minimal implementation
Exact Rust setup used by form/responsive.
Open to load code.
04 · Adapt
Variants and composition
Variants
Use the preview Variant menu when alternate registered stories exist. Each selection mounts a fresh configuration.
Composition
Inputs · input · widget
05 · Reference
API, tokens, accessibility
Tokens
DesignSystemInspect exact story code for roles and capability projection.
Accessibility
Input contract mountedNo input claim in the representative story.
Contract
Evidence in progress2/23 axes covered
06 · Go deeper
Advanced guidance
Authored implementation guidance
Responsive form of sections and fields. Field focus is host-owned (InteractionScene).


When to use


Use FormPrefer
Settings / credential multi-field surfacesTextInput alone for one field
Required / help / error chromeDialog for one-shot confirm


Focus law


ConcernOwner
Which field is focusedHost InteractionScene
Paint focus chromeForm::focused_field(scene.focused())
Tab between fieldsHost scene tab / focus_move
Enter activateFormState::handle_key(..., focused)
Click unfocused fieldHost scene.focus(hit_id)
Click focused fieldFormOutcome::Activated


Removed: FormOutcome::FocusChanged.


Outcomes


    

  • Ignored
    • 

  • Activated(Id)
    • 

  • Scrolled
    • 



Non-color cues


    

  • Required: *
    • 

  • Disabled: ⊘ + dim
    • 

  • Focused: bold label + Role::Focus value + leading ›
    • 

  • Hover: underline label
    • 

  • Error: Role::Danger supporting line
    • 



Responsive


Two columns when width allows (ResponsiveSurface::Form); else single column. Stories: form/responsive, form/narrow, form/unicode.



This preview mounts one persistent Rust state machine. Focus it, use the current actions shown by the runtime, inspect the typed outcome, and use Reset for fresh state.


Status


VariantMeaning
HelpNeutral help
WarningNon-blocking
ErrorBlocking validation
PendingAsync validation


Compose Fieldset through Form. Caption-only chrome without a value row: FieldCaption (Label + Description).



This preview mounts one persistent Rust state machine. Focus it, use the current actions shown by the runtime, inspect the typed outcome, and use Reset for fresh state.
Ownership boundary
TermRock owns reusable terminal rendering and interaction state. The host owns domain data, policy, persistence, authorization, and side effects.
Evidence status
2 covered, 9 partial, and 4 missing contract axes. Missing evidence is not a behavior claim.
File Picker
A host-driven file/directory browser with breadcrumbs, multi-select, path entry, and optional preview — no filesystem I/O in TermRock.
Form Wizard
Multi-step form wizard chrome with stepper, validation gates, review, failure/retry, and resume. Domain fields stay consumer-owned.