Text

A text field, in the spirit of the HTML <input type="text"> element.

Wraps Tweakpane's string binding.

Extends the vanilla JS Tweakpane API to update the bound value on every keystroke. (If you prefer Tweakpane's default behavior of only updating on blur, set live={false}.)

See <TextArea> for a multi-line input variation.

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

---

Example

Demo

Message: Cosmic Manifold

Code

TextExample.svelte

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

  let text = 'Cosmic Manifold'
</script>

<Text bind:value={text} label="The Message" />
<pre>Message: {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. To match expectations around reactive components, the default here diverges from the vanilla JS Tweakpane behavior, which only updates on blur.
Type	boolean
Default	true

---

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	TextChangeEvent