Text Area
A multi-line text input.
1use herogpui::components::textarea::TextArea;Usage
Platform edits support composed text and paste. Enter confirms active composition before inserting a newline.
1use herogpui::prelude::TextArea;
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6 .w(px(384.))
7 .child(TextArea::new(self.demo_text("ta-usage", "", cx))
8 .placeholder("Share a quick project update...")
9 .cols(48)
10 .rows(6)
11 .full_width())Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
TextArea
Text Area is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Text Area uses.
Styling
| Style | Description |
|---|---|
inner Input px(px(12.)) + FIELD_TEXT + field_radius + apply_field_chrome | 12px inline inset, 14px desktop type, field radius, colours and shadow match. |
inner Input wrapper text | Labels use 14px/20px and helper/error text use 12px/16px, independent of host leading. |
rows_height(3) = 76px | The documented three-row default uses three 20px lines plus 16px vertical padding. |
apply_field_chrome | Theme field border width and colour chain. |
direct apply_field_chrome state colours | State colours switch directly; GPUI has no property-transition implementation for these values. |
FieldVariant::Secondary in apply_field_chrome | Lower-emphasis surface treatment. |
full_width() | Full-width modifier. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
rows( | u32 | 3 | Sets the visible height from the requested line count and field padding. |
cols( | u32 | — | GPUI has no ch unit, so columns use an 8px character-advance approximation. |
value( | text, | — | Writes the caller-provided controlled value into the owned InputState. |
default_value( | text | — | Seeds the uncontrolled InputState once. |
on_change( | Fn( | — | Reports accepted text and newline edits without reporting rejected maxLength edits. |
placeholder( | text | — | Placeholder shown while empty and unfocused. |
is_disabled( | bool | false | Removes focus and editing and applies disabled opacity. |
is_read_only( | bool | false | Keeps focus and selection while suppressing edits. |
is_required( | bool | false | Participates in the HeroGPUI form validity registry. |
name( | text | — | Submission name stored with the current multi-line value. |
max_length( | usize | — | Rejects character and newline edits beyond the limit without reporting an unchanged value. |
min_length( | usize | — | Marks a non-empty value invalid below the character minimum. |
full_width( | bool | false | Stretches to the available container width. |
variant( | FieldVariant | FieldVariant:: | Primary field chrome or the lower-emphasis surface variant. |
Parts
| Part | Description |
|---|---|
TextArea | Multi-line editable field backed by InputState with caret, selection and validation. |
States
| Builder | State | Description |
|---|---|---|
inner Input hover + apply_field_chrome | Hover | Changes field background and border while unfocused. |
inner Input focus + apply_field_chrome | Focused | Draws focused field background, border and ring. |
focused field treatment | Focus visible | Pinned CSS adds no rule beyond the focused field treatment. |
inner Input validity + apply_field_chrome | Invalid | Uses invalid field ring and focused background. |
is_disabled(bool) | Disabled | Applies theme disabled opacity and removes editing and focus. |