Textarea

A multi-line text input field, in the spirit of the HTML <textarea> element.

Integrates the tweakpane-textarea-plugin by Krzysztof Goliński and Jakub Koźniewski.

Extends the underlying implementation with the live property to match the behavior of the <Text> component.

Usage outside of a <Pane> component will implicitly wrap the text area in <Pane position="inline">.

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations. The fork also changes the package name from @pangenerator/tweakpane-textarea-plugin to @kitschpatrol/tweakpane-plugin-textarea for consistency with other plugins.

---

Example

Demo

Code

TextareaExample.svelte

<script lang="ts">
  import { Textarea } from 'svelte-tweakpane-ui'

  let text = ''
</script>

<Textarea bind:value={text} placeholder="The void" rows={8} />
<pre>{text}</pre>

---

Props

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

value bindablerequired
Description	The value to control. A string value to control.
Type	string

live optional
Description	Whether to provide live updates to the bound value on every keystroke.
Type	boolean
Default	true

placeholder optional
Description	Placeholder text to display when the value is empty.
Type	string
Default	'Enter text here'

rows optional
Description	The number of lines of text to display. If lines of input exceed this value, then the text area will scroll.
Type	number
Default	3

---

Events

change
Description	Fires when value changes. This event is provided for advanced use cases. It's usually preferred to bind to the value prop instead. The event.details payload includes a copy of the value and an origin field to distinguish between user-interactive changes (internal) and changes resulting from programmatic manipulation of the value (external).
Extends	ValueChangeEvent
Type	TextareaChangeEvent