Text Input

Description#

<text-input></text-input>

The text-input component is the modal dialog that asks the player for information: their name, a password, a selection from a list, and so on. It is created automatically by the Input action, which passes it the text to show, the input type, validation and save callbacks, and other options. You normally never write <text-input> yourself; you configure it through the Input action.

Source Code: https://github.com/Monogatari/Monogatari/tree/develop/src/components/text-input

Supported Input Types#

The type prop selects which form control is rendered. The following types are supported:

A single-line field is rendered as an <input> of the matching native type. textarea renders a <textarea>. select renders a dropdown built from options. radio and checkbox render one labelled control per entry in options.

Structure#

The component renders a form inside a modal. The shape of the input region depends on the type:

<text-input class="modal modal--active" data-component="text-input">
    <form class="modal__content">
        <p data-content="message">What is your name?</p>

        <!-- Single-line field (text, password, number, …) -->
        <input data-content="field" name="field" type="text" tabindex="0">

        <small data-content="warning" class="block"></small>
        <div>
            <button type="submit" tabindex="0">OK</button>
        </div>
    </form>
</text-input>

For select, the field becomes a <select data-content="field"> containing one <option> per entry. For radio and checkbox, each option is rendered as:

<div class="input-pair">
    <input data-content="field" id="field_0" name="field" type="radio" value="pink" tabindex="0">
    <label for="field_0">Pink</label>
</div>

Data Content Keys#

State#

Props#

The Input action sets these props for you. The names below are the component’s prop names, with the matching Input action property noted.

Validation and Submit Flow#

When the player submits the form, the component:

1. Reads the value from the field. For radio it takes the checked option’s value (or an empty string if none is checked); for checkbox it collects every checked value into an array; otherwise it reads the field’s value as a string.
2. Runs the validate function with that value. Validation may be synchronous or return a Promise.
3. If validation passes, it runs onSubmit with the value, then removes itself from the DOM and runs callback.
4. If validation fails, the input stays open and the warning text (with variables interpolated) is shown in the warning element.

Because both validate and onSubmit are awaited, you can perform asynchronous work (such as a server request) in either of them.

For text-based fields (text, textarea, password, email, url, number, color), the default value is applied after the component mounts so the cursor lands at the end of the pre-filled text. The field is focused automatically when the modal opens.

Blocking Advancement#

While a text-input is open, the game cannot advance:

shouldProceed (): Promise<void> {
    return Promise.reject('Input is awaiting user input.');
}

The component’s shouldProceed always rejects, so attempts to proceed (clicking, auto-play, skip) are refused until the player submits a valid value. Submission removes the component and runs the callback, which is what lets the Input action resume the script.

Styling#

/* The modal container */
text-input {
    /* Inherits base .modal styles */
}

/* Active state */
text-input.modal--active {
    display: flex;
}

/* The form holding the prompt, field and button */
text-input .modal__content {
    /* Layout for the input dialog */
}

/* The prompt text */
text-input [data-content="message"] {
    /* Prompt styling */
}

/* The input field itself */
text-input [data-content="field"] {
    width: 100%;
}

/* The validation warning */
text-input [data-content="warning"] {
    color: #d32f2f;
}

/* A radio/checkbox option row */
text-input .input-pair {
    display: flex;
    align-items: center;
}

To style only specific inputs, pass a Class through the Input action; those classes are added to the text-input element and can be targeted in your CSS.

Related#

• Input Action - Creates and configures the text-input
• Choices - An alternative way to ask the player to pick an option
• Message - Show a modal message without collecting input