Text input

TODO: Add a GIF of the EditableText widget with cursor and selection.

While the ability to capture text is a core requirement for game dev tooling, it's a common task even in games themselves. Player names, search bars and chat all rely on the ability to enter and submit plain text.

In Bevy 0.19, we've added basic support for text entry, in the form of the EditableText widget. Spawning an entity with this component will create a simple unstyled rectangle of editable text. Our initial text entry supports:

• Press keys on your keyboard, get text (wow!).
• Cursor navigation: arrow keys, Home/End, and word-level shortcuts (Ctrl/Alt+arrow).
• Selection: Shift+arrow extends by character or word; click and drag with the pointer.
• Multi-click: double-click to select a word, triple-click to select the whole line.
• Backspace and Delete, both for single characters and words.
• Clipboard: uses the OS clipboard with the system_clipboard feature enabled, or an in-app buffer without it.
• Unicode-aware navigation and editing: 1 byte/char != 1 character.
• Bidirectional text support, allowing both left-to-right and right-to-left scripts.
• IME (Input Method Editor) support for CJK and other composing scripts.
• Multiline support: newlines, soft-wrapping, and vertical scrolling.
• Horizontal scrolling when content exceeds the visible width.
• Per-character input filtering via EditableTextFilter.
• Optional select-all on focus with the SelectAllOnFocus component.
• Max character limits via EditableText::max_characters.

Many important features are currently unimplemented (placeholder text, undo-redo, password masking...). While we've been careful to expose and document the internals so that you can readily implement these features in your own projects, we would like to continue to expand the functionality of the base widget. Please consider making a PR!

Usage

To get started, spawn an entity with the EditableText component.

commands.spawn((
    Node {
        width: px(200),
        border: px(2).all(),
        padding: px(8).all(),
        ..default()
    },
    BorderColor::from(Color::WHITE),
    BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
    EditableText::default(),
    TextFont {
        font_size: FontSize::Px(24.0),
        ..default()
    },
    TextCursorStyle::default(),
));

When working with text input, you'll probably want to add the pre-existing TabNavigationPlugin as well, to allow users to easily swap input focus.

To read and clear the input on submission:

fn on_submit(
    input_focus: Res<InputFocus>,
    keyboard: Res<ButtonInput<KeyCode>>,
    mut inputs: Query<&mut EditableText>,
) {
    if keyboard.just_pressed(KeyCode::Enter)
        && let Some(entity) = input_focus.get()
        && let Ok(mut input) = inputs.get_mut(entity)
    {
        println!("Submitted: {}", input.value());
        input.clear();
    }
}

EditableText integrates with Bevy's InputFocus resource, accepting keyboard inputs only when the selected EditableText entity is focused.

The event TextEditChange is emitted after changes have been applied to the EditableText.

Feathers text input

If you're building editor tooling with Bevy Feathers, there's a pre-built alternative: FeathersTextInput. It wraps EditableText and handles several things for you automatically:

• A focus ring appears on the container when the input is focused, and disappears when it isn't.
• Cursor and selection colors update to match the active UiTheme.
• The mouse cursor changes to a text beam on hover.
• TabIndex is set so keyboard tab navigation works without any extra setup.

You still subscribe to On<TextEditChange> to react to the text value — like all Feather's widgets, it handles presentation, not your application logic.

This widget is structured as a container/inner pair:

bsn! {
    :FeathersTextInputContainer
    Children [
        (
            :FeathersTextInput {
                @max_characters: 20usize,
            }
            MyMarker
            on(on_text_change)
        )
    ]
}

fn on_text_change(
    _trigger: On<TextEditChange>,
    input: Single<&EditableText, With<MyMarker>>,
) {
    println!("{}", input.value());
}

Use EditableText directly when you need full control over appearance — a way to get the player's name, a styled chat box, or a search bar in your game's UI. Use FeathersTextInput when you want a polished, Feathers-themed widget out of the box.