Forms and Inputs

Instructions for building forms that update on submit or preserve focus during controlled input.

When to Use

Use this when you need form handling, text inputs, or focus-safe controlled inputs.

Steps

1. Keep input values in local variables and avoid re-rendering on every keystroke.
2. On submit, update local state and call handle.update().
3. For controlled inputs, store a DomRef, call handle.updateSync(), then restore focus/selection.
4. Prefer splitting inputs into their own components if a sibling preview must update live.

Arguments

• submitOn - submit trigger (submit or blur, defaults to submit)
• useControlledInput - whether to demonstrate controlled input handling (defaults to false)
• formName - component name (defaults to Form)

Examples

Example 1 usage pattern:

Create a contact form that updates the UI only after submit.

Example 2 usage pattern:

Implement a controlled input that preserves focus with a DomRef.

Output

Example output:

Created: src/contact-form.ts
Notes: Inputs are uncontrolled until submit.

Present Results to User

Explain the update strategy (submit vs controlled) and where focus is preserved.

name: vani-forms-inputs description: Implement Vani forms and inputs without losing focus. argument-hint: "[form or input behavior]"

---

Vani Forms and Inputs Command

When to use

Use this skill when handling inputs, forms, or focus-sensitive UI in Vani.

Instructions

Follow these steps:

1. Keep input values in local variables.
2. Read input changes via oninput without calling handle.update().
3. On submit or blur, update state and call handle.update().
4. For controlled inputs, use a DomRef, call handle.updateSync(), then restore focus/selection.

Output expectations

• Use only @vanijs/vani or other public packages.
• Avoid re-rendering on every keystroke unless focus is preserved.
• If $ARGUMENTS is provided, adapt the strategy to that form scenario.