RadioGrid

A grid of radio buttons.

Integrates the Radio Grid control from Tweakpane-creator Hiroki Kokubun's Essentials plugin.

See <ButtonGrid> for a button-flavored variation.

Unlike the vanilla Tweakpane API, Svelte Tweakpane UI provides a unique groupname for each instance of RadioGrid by default for consistency with expectations around component isolation. You may still assign the groupname prop manually to create cross-component groups that share selection exclusivity.

Svelte Tweakpane UI also includes some additional logic to manage default grid dimensions:

• If no rows or columns props are provided, it will create a grid with the squarest possible aspect ratio for the given quantity of values.

• If a single rows or columns prop is provided, it lets the undefined axis grow / shrink as needed to accommodate the quantity of values.

• If both rows and columns props area provided, then buttons may be clipped if rows * columns < values.length.

Usage outside of a <Pane> component will implicitly wrap the radio grid 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 @tweakpane/plugin-essentials to @kitschpatrol/tweakpane-plugin-essentials for consistency with other plugins.

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

  // Svelte transition works around CSS gradient
  // transition limitations
  import { fade } from 'svelte/transition';

  const radioValues = [
    ['magenta', 'orange'],
    ['yellow', 'red'],
    ['violet', 'gold'],
    ['red', 'rebeccapurple']
  ];

  let value = 1;

  $: [start, end] = radioValues[value - 1];
</script>

<RadioGrid bind:value prefix="Color Scheme " values={[1, 2, 3, 4]} />

<div class="demo">
  {#key value}
    <div
      class="swatch"
      style:--e={end}
      style:--s={start}
      transition:fade
    ></div>
  {/key}
</div>

<style>
  div.demo {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    background: white;
  }

  div.swatch {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--s), var(--e));
  }
</style>