Textarea

Multiline editing, navigation and selection.

Textarea

Textarea supports multiple lines of text and provides navigation, selection and undo/redo capabilities. Bind it to a reactive signal for two‑way editing.

<textarea
  value={content()}
  onInput={(next) => setContent(next)}
  width="100%"
  height={12}
/>

You can highlight specific ranges programmatically, for example to indicate syntax errors.

<textarea
  value={code()}
  highlights={[{ start: 10, end: 20, color: "yellow" }]}
  onInput={(next) => setCode(next)}
/>

Textarea is also a good foundation for simple editors: pair it with a status bar, line numbers, and a help footer. For complex use cases (syntax highlighting, diffs), combine it with Code and Tree‑sitter.

Props

Prop	Type	Notes
`value`	`string`	Controlled content; keep it in state/store.
`onInput`	`(value) => void`	Called when the user edits the text.
`width`	`number \| %`	Set to `"100%"` for editor-like panels.
`height`	`number`	Pick a fixed height or put it in a flex container.
`highlights`	`ranges`	Highlight ranges (e.g. errors, search matches).