TextInput

TextInput is a single-line field for typing, with selection, clipboard support and a placeholder.

Light

Dark

TextInputLive preview soon

Value and changes

The field shows the value it's given and reports every edit. Keeping the value in state ties the two together:

struct NameField {
    struct State {
        std::string name;
    };

    View render(const State& state) const {
        return TextInput {
            state.name,
            placeholder = "Level name",
            on_change = [](const ChangeEvent& change, State& state) {
                state.name = change.value;
            },
        };
    }
};

When the value passed in changes for another reason, such as a reset button clearing the state, the field follows it.

Submitting

Pressing Enter sends the current text to on_submit:

TextInput {
    state.query,
    placeholder = "Search",
    on_change = [](const ChangeEvent& change, State& state) { state.query = change.value; },
    on_submit = [](const SubmitEvent& submit, State& state) { state.results = search(submit.value); },
}

Appearance

The field takes its colors from the theme, and accepts the same text props as Text, along with layout and style props:

TextInput {
    state.name,
    font = Font::MONO,
    width = 240_px,
    focused = { border = Border { 1.f, accent } },
}