Input#

A focusable single-line text field with two-way model binding. Renders as a bordered box (accent border when focused) with a block cursor.

Import#

TSX 
import { Input } from '@sigx/terminal';

Usage#

TSX 
/** @jsxImportSource @sigx/terminal */
import { component, defineApp, signal, Input } from '@sigx/terminal';

const App = component(() => {
    const name = signal('');
    return () => (
        <box border="single" label="Form">
            <Input
                model={() => name}
                label="Name"
                placeholder="Type here"
                autofocus
                onInput={(v) => console.log('changed:', v)}
                onSubmit={(v) => console.log('submitted:', v)}
            />
            <br />
            <text>You typed: {name.value}</text>
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

PropTypeNotes
modelModel<string>two-way bound value
placeholderstringshown when empty
autofocusbooleangrab focus on mount
labelstringcaption above the field

Events#

EventPayloadWhen
inputstringa printable character changes the value
submitstringEnter

Backspace deletes; control bytes and escape sequences (including Tab, which cascades to focus cycling) are ignored. A brief ready delay after mount prevents the activating Enter from a previous focus from triggering submit.

See also#