Control Components

Text

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

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

🔗

<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

🔗

value 🔗 bindablerequired
Description	A `string` value to control. The 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`

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

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

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

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`

Text

Example

Demo

Code

Props

value

live

disabled

label

theme

Events

change