ToggleGroup

One selected item at a time, with arrow-key movement.

all

Variations

Compact

Disabled

Source

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import ToggleGroupExample from './ToggleGroupExample.svelte';
</script>

<ToggleGroupExample compact={false} disabled={false} />

<script lang="ts">
  import { ToggleGroup } from 'portal-bits';
  let { compact = false, disabled = false }: { compact?: boolean; disabled?: boolean } = $props();
  let selected = $state('all');
</script>

{#snippet grid()}
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
    ><rect width="7" height="7" x="3" y="3" rx="1" /><rect
      width="7"
      height="7"
      x="14"
      y="3"
      rx="1"
    /><rect width="7" height="7" x="14" y="14" rx="1" /><rect
      width="7"
      height="7"
      x="3"
      y="14"
      rx="1"
    /></svg
  >
{/snippet}
{#snippet apps()}
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
    ><rect width="18" height="18" x="3" y="3" rx="4" /><path d="M12 8v8" /><path d="M8 12h8" /></svg
  >
{/snippet}
{#snippet layers()}
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
    ><path
      d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
    /><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" /><path
      d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
    /></svg
  >
{/snippet}

<div class="stack">
  <ToggleGroup
    label="Example category"
    bind:value={selected}
    {compact}
    {disabled}
    items={[
      { value: 'all', label: 'All', icon: grid },
      { value: 'apps', label: 'Apps', icon: apps },
      { value: 'collections', label: 'Collections', icon: layers },
    ]}
  />
  <p aria-live="polite">{selected || 'Nothing selected'}</p>
</div>

<style>
  .stack {
    display: grid;
    justify-items: center;
    gap: 12px;
  }
  p {
    margin: 0;
  }
</style>

API reference

These tables list the props and snippets that ToggleGroup declares. Attributes passed through to an element or primitive are listed under Forwarded attributes, not here.

Props

Name	Type	Default	Required	Binding	Description
`label`	`string`	None	Yes	One-way	The accessible name of the group.
`items`	`{ value: string; label: string; icon?: Snippet; disabled?: boolean }[]`	None	Yes	One-way	The choices. `label` is the accessible name even when compact hides it.
`value`	`string`	`""`	No	Bindable	The selected item value. Empty means none selected.
`disabled`	`boolean`	`false`	No	One-way	Disables every item.
`compact`	`boolean`	`false`	No	One-way	Shows icons only. Give each item an `icon`.

Forwarded attributes

None. ToggleGroup forwards no attributes.

The primitive underneath is a Bits UI peer dependency. Its own options are documented in the Bits UI Toggle Group documentation. Only the props listed on this page are part of the ToggleGroup contract. No data attributes are documented as stable.

Limits

Single selection only. Pressing the selected item clears `value`.
No `onValueChange` callback. Bind `value`.
No attributes are forwarded to the group or its items.