List

An option list picker, similar to an HTML <select> element.

Wraps Tweakpane's list blade. See Tweakpane's documentation for list blades.

Svelte Tweakpane UI extends Tweakpane's underlying implementation to allow for arbitrary arrays of values to be used as options. See the ListOptions type for details on how to provide specific labels to options.

Tweakpane's addBlade list variations is used instead of the addBinding method to allow for additional value types. The value remains bindable via Svelte's reactivity.

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

---

Example

Demo

Selected Option: 1

Code

ListExample.svelte

<script lang="ts">
  import { List, type ListOptions } from 'svelte-tweakpane-ui'

  const options: ListOptions<number> = {
    b: 2,
    a: 1,
    c: 3,
  }
  let selection: number = 1
</script>

<List bind:value={selection} label="Alphanumerics" {options} />
<pre>Selected Option: {selection}</pre>

---

Props

value bindablerequired
Description	Value of the selected options item.
Type	unknown

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

options required
Description	A collection of options to select from. The arbitrary array list type is a convenience addition to to the vanilla JS Tweakpane API.
Type	ListOptions<unknown>

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

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	ListChangeEvent