/build-gpui-apps

Textarea

Textarea is the styled control for ordinary multi-line text. Use Input for a single line and Editor for source code.

Import

use gpui_kit::component::input::{Textarea, TextareaState};

Basic usage

let notes = cx.new(|cx| {
    TextareaState::new(window, cx)
        .rows(5)
        .placeholder("Notes")
});

Textarea::new(&notes)

Auto-grow

let message = cx.new(|cx| {
    TextareaState::new(window, cx)
        .auto_grow(2, 8)
        .placeholder("Write a message")
});

Textarea::new(&message)

The control grows until max_rows; overflowing content then scrolls.

Value and events

let value = notes.read(cx).value();

notes.update(cx, |state, cx| {
    state.set_value("Updated notes", window, cx);
});

cx.subscribe(&notes, |this, state, event: &InputEvent, cx| {
    if matches!(event, InputEvent::Change) {
        this.notes = state.read(cx).value();
        cx.notify();
    }
});

insert, replace, cursor_position, soft_wrap, searchable, and submit_on_enter are available on TextareaState.

Sizes

Textarea::new(&notes).large()
Textarea::new(&notes) // medium (default)
Textarea::new(&notes).small()

The size changes the text size and the padding around the text together. It does not set the height: use h for a fixed height, and let rows or auto_grow decide the height of a growing textarea.

Appearance

Textarea::new(&notes)
    .h(px(160.))
    .bordered(true)
    .disabled(false)
    .readonly(false)
    .aria_label("Notes")

Unlike disabled, a read-only textarea keeps the normal appearance and still can be focused, selected and copied, it only rejects the changes made by the user.

Textarea deliberately does not expose Input-only adornments such as prefix, suffix, mask toggle, or the clear button. Compose related actions beside the textarea.

Atomic inline tokens

Use tokens to include mentions, file references or commands in a multi-line message. Insert a token with TextareaState::replace_with_token, or restore a saved draft with set_value. The default label is ready to use; add a renderer when you want an icon or other custom content:

Textarea::new(&state)
    .token(|token, _, _| InputToken::new(token).icon(IconName::File))

Import InputToken from gpui_kit::component::input and IconName from gpui_kit::component. A token wraps onto the next line as a whole, and auto-grow adjusts the textarea height to fit. Put line breaks in the text between tokens. See Input: atomic inline tokens for editing, activation, draft persistence, mode restrictions and JavaScript APIs.

Documentation license: original prose and illustrations for which GPUI Kit holds licensing rights are also offered under CC BY 4.0. When copying or adapting, credit GPUI Kit, link the source (https://gpui-kit.com/component/textarea) and https://creativecommons.org/licenses/by/4.0/, and indicate changes. Code examples and software source use Apache-2.0; third-party material retains its terms; existing Apache-2.0 permissions remain.

Bundled from GPUI Kit. Documentation prose: CC BY 4.0; code examples: Apache-2.0. Changes: documentation links localized, asset URLs made absolute, and this attribution added.