Textarea nativelite

A multi-line text field.

A2UI basic: TextField (longText)
Children: none

Preview

Loading the renderer…

labelrequired

namerequired

placeholder

rows

autosize

maxRows

value

disabled

validateOn

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Textarea",
          "label": "Notes",
          "name": "notes",
          "rows": 4
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Textarea rendered by the React renderer on Web — **Web** React

Textarea rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Textarea rendered by the Compose renderer on Android — **Android** Compose

Textarea rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-textarea, painted by each native renderer.

Variants

disabled

Props

Prop	Type	Default	Description
`label`required	`string`	–	The field label.
`name`required	`string`	–	The field's key in the submitted data.
`placeholder`	`string`	–	Hint text while empty.
`rows`	`number`	`3`	Visible lines (the minimum when autosizing).
`autosize`	`boolean`	`false`	Grows with the text from `rows` up to `maxRows`.
`maxRows`	`number`	–	Autosize stops growing here and scrolls.
`value`bind	`string`	–	The text; bind it to a data path.
`disabled`	`boolean`	`false`	Shows it inert.
`checks`	`[check]`	–	Validation rules.
`validateOn`	`change \| blur \| submit`	`"blur"`	When the checks run.

Events and slots

Name	Kind
`on.change`	event: runs an action
`on.focus`	event: runs an action
`on.blur`	event: runs an action

Accessibility

Role: textbox
Semantics: textbox (multiline)

Keys	Action
`Enter`	newline

Theming

Recipe parts: Textarea/rootTextarea/labelTextarea/fieldTextarea/placeholderTextarea/descriptionTextarea/error
Keyed by: disabled:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Text area

The field's own recipe, grown: radius 12, card fill under a card stroke, focus swaps the stroke to active — no ring.

Padding 8/12, three rows tall, and it GROWS with content; the drag handle is off everywhere. Inside a group it goes borderless, because the row is already the chrome.

Webok

Textareapackages/ui/src/textarea.tsx

iOSok

GlassTextField(lines:)apps/ios/ExpUI/Sources/GlassControls.swift

Androidok

GlassTextField(minLines/maxLines)apps/android/app/src/main/java/com/exponential/app/ui/components/GlassTextField.kt

Desktopok

controls::inputs::web_textareaapps/desktop/crates/exponential-ui-gpui/src/controls/inputs.rs