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">.

Selected Option: 1

<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>