Component 53 of 60

Textarea

A styled multi-line editor backed by native GPUI editing.

site/src/previews/textarea.rs

Starting the preview. GPUI compiles to WebAssembly, so the first load takes a few seconds. This browser has neither WebGPU nor WebGL 2, so the live preview cannot run. The code on this page still works. The preview did not start.

fn textarea_preview(&self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    let bio = window.use_keyed_state("textarea.bio", cx, |window, cx| {
        TextareaState::new(window, cx)
            .rows(5)
            .placeholder("Tell us about your work")
    });

    div().w(px(420.)).child(
        Field::from_control("textarea.bio.field", textarea(&bio))
            .label("Bio")
            .description("A short introduction for your profile."),
    )
}

Textarea, running in the browser. The second tab shows the preview's own source, which includes its layout and demo state. For the smallest working example, see Usage below. Download the whole showcase for its imports and helpers.

Installation

After the one-time setup, run the command from your app root. The CLI writes the modules and keeps src/ui/mod.rs in step.

gpuicn add textarea

If you prefer to copy the files by hand, declare them yourself:

// src/ui/mod.rs
pub mod theme;
pub mod input;
pub mod textarea;

// src/main.rs
mod ui;

Usage

Put this in a view module and return example(window, cx) from its render method.

use crate::ui::textarea::*;
use gpui_kit::{App, IntoElement, Window};

fn example(window: &mut Window, cx: &mut App) -> impl IntoElement {
    let state = window.use_keyed_state("message", cx, |window, cx| {
        TextareaState::new(window, cx)
            .rows(4)
            .placeholder("Write a message")
    });
    textarea(&state).aria_label("Message")
}

API reference

pub fn textarea(state: &Entity<TextareaState>) -> Textarea

Creates a textarea using the caller's retained editing state.

Installed source, 10 lines

//! Discoverable Nova textarea built on the shared Kit-backed input source.

pub use super::input::{Textarea, TextareaState};
use gpui_kit::Entity;

/// Creates a textarea using the caller's retained editing state.
pub fn textarea(state: &Entity<TextareaState>) -> Textarea {
    Textarea::new(state)
}

Platform notes

Visual reference: shadcn/ui 4.19.0, Neutral Nova. Implementation: crates/ui/registry/textarea/textarea.rs, backed by crates/ui/registry/input/input.rs and GPUI Kit 0.6.4.

Textarea uses caller-owned TextareaState and supports the same disabled, read-only, invalid, paste interception, history, clipboard and IME behavior as Input. It composes with Field for a visible label, description and validation message. Rows set the starting height; content scrolls inside the native editor.

Image or file paste interception is synchronous on native platforms. Browser clipboard access for those payloads needs an async permission flow and remains outside this API. Native OS IME and screen-reader workflows require device checks.