Toggle Group

A set of two-state buttons that can be toggled on or off.

Basic

Outline

Outline With Icons

Sizes

With Spacing

With Icons

Filter

Date Range

Sort

With Input and Select

Vertical

Vertical Outline

Vertical Outline With Icons

Vertical With Spacing

Font Weight Selector

<script lang="ts">
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { Field, FieldDescription, FieldLabel } from '@sveltery/components/field';
  import { Input } from '@sveltery/components/input';
  import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@sveltery/components/select';
  import { ToggleGroup, ToggleGroupItem } from '@sveltery/components/toggle-group';
  import { IconPlaceholder } from '@sveltery/components/icons';

  const fontWeights = [
    { value: 'light', label: 'Light', weight: 'font-light' },
    { value: 'normal', label: 'Normal', weight: 'font-normal' },
    { value: 'medium', label: 'Medium', weight: 'font-medium' },
    { value: 'bold', label: 'Bold', weight: 'font-bold' },
  ];
  const statusItems = [
    { label: 'All', value: 'all' },
    { label: 'Active', value: 'active' },
    { label: 'Archived', value: 'archived' },
  ];
  let fontWeight = $state(['normal']);
</script>

{#snippet ToggleGroupBasic()}
  <Example title="Basic">
    <ToggleGroup multiple spacing={1}>
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <IconPlaceholder
          lucide="BoldIcon"
          tabler="IconBold"
          hugeicons="TextBoldIcon"
          phosphor="TextBIcon"
          remixicon="RiBold"
        />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <IconPlaceholder
          lucide="ItalicIcon"
          tabler="IconItalic"
          hugeicons="TextItalicIcon"
          phosphor="TextItalicIcon"
          remixicon="RiItalic"
        />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <IconPlaceholder
          lucide="UnderlineIcon"
          tabler="IconUnderline"
          hugeicons="TextUnderlineIcon"
          phosphor="TextUnderlineIcon"
          remixicon="RiUnderline"
        />
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupOutline()}
  <Example title="Outline">
    <ToggleGroup variant="outline" value={['all']}>
      <ToggleGroupItem value="all" aria-label="Toggle all">
        All
      </ToggleGroupItem>
      <ToggleGroupItem value="missed" aria-label="Toggle missed">
        Missed
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupOutlineWithIcons()}
  <Example title="Outline With Icons">
    <ToggleGroup variant="outline" multiple size="sm">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <IconPlaceholder
          lucide="BoldIcon"
          tabler="IconBold"
          hugeicons="TextBoldIcon"
          phosphor="TextBIcon"
          remixicon="RiBold"
        />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <IconPlaceholder
          lucide="ItalicIcon"
          tabler="IconItalic"
          hugeicons="TextItalicIcon"
          phosphor="TextItalicIcon"
          remixicon="RiItalic"
        />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <IconPlaceholder
          lucide="UnderlineIcon"
          tabler="IconUnderline"
          hugeicons="TextUnderlineIcon"
          phosphor="TextUnderlineIcon"
          remixicon="RiUnderline"
        />
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupSizes()}
  <Example title="Sizes">
    <div class="flex flex-col gap-4">
      <ToggleGroup size="sm" value={['top']} variant="outline">
        <ToggleGroupItem value="top" aria-label="Toggle top">
          Top
        </ToggleGroupItem>
        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
          Bottom
        </ToggleGroupItem>
        <ToggleGroupItem value="left" aria-label="Toggle left">
          Left
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Toggle right">
          Right
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup value={['top']} variant="outline">
        <ToggleGroupItem value="top" aria-label="Toggle top">
          Top
        </ToggleGroupItem>
        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
          Bottom
        </ToggleGroupItem>
        <ToggleGroupItem value="left" aria-label="Toggle left">
          Left
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Toggle right">
          Right
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  </Example>
{/snippet}

{#snippet ToggleGroupSpacing()}
  <Example title="With Spacing">
    <ToggleGroup size="sm" value={['top']} spacing={2}>
      <ToggleGroupItem value="top" aria-label="Toggle top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem value="left" aria-label="Toggle left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupWithIcons()}
  <Example title="With Icons">
    <ToggleGroup multiple variant="outline" spacing={2} size="sm">
      <ToggleGroupItem
        value="star"
        aria-label="Toggle star"
        class="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground"
      >
        <IconPlaceholder
          lucide="StarIcon"
          tabler="IconStar"
          hugeicons="StarIcon"
          phosphor="StarIcon"
          remixicon="RiStarLine"
        />
        Star
      </ToggleGroupItem>
      <ToggleGroupItem
        value="heart"
        aria-label="Toggle heart"
        class="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground"
      >
        <IconPlaceholder
          lucide="HeartIcon"
          tabler="IconHeart"
          hugeicons="FavouriteIcon"
          phosphor="HeartIcon"
          remixicon="RiHeartLine"
        />
        Heart
      </ToggleGroupItem>
      <ToggleGroupItem
        value="bookmark"
        aria-label="Toggle bookmark"
        class="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground"
      >
        <IconPlaceholder
          lucide="BookmarkIcon"
          tabler="IconBookmark"
          hugeicons="BookmarkIcon"
          phosphor="BookmarkIcon"
          remixicon="RiBookmarkLine"
        />
        Bookmark
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupFilter()}
  <Example title="Filter">
    <ToggleGroup value={['all']} variant="outline" size="sm">
      <ToggleGroupItem value="all" aria-label="All">
        All
      </ToggleGroupItem>
      <ToggleGroupItem value="active" aria-label="Active">
        Active
      </ToggleGroupItem>
      <ToggleGroupItem value="completed" aria-label="Completed">
        Completed
      </ToggleGroupItem>
      <ToggleGroupItem value="archived" aria-label="Archived">
        Archived
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupDateRange()}
  <Example title="Date Range">
    <ToggleGroup
      value={['today']}
      variant="outline"
      size="sm"
      spacing={2}
    >
      <ToggleGroupItem value="today" aria-label="Today">
        Today
      </ToggleGroupItem>
      <ToggleGroupItem value="week" aria-label="This Week">
        This Week
      </ToggleGroupItem>
      <ToggleGroupItem value="month" aria-label="This Month">
        This Month
      </ToggleGroupItem>
      <ToggleGroupItem value="year" aria-label="This Year">
        This Year
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupSort()}
  <Example title="Sort">
    <ToggleGroup value={['newest']} variant="outline" size="sm">
      <ToggleGroupItem value="newest" aria-label="Newest">
        <IconPlaceholder
          lucide="ArrowDownIcon"
          tabler="IconArrowDown"
          hugeicons="ArrowDownIcon"
          phosphor="ArrowDownIcon"
          remixicon="RiArrowDownLine"
        />
        Newest
      </ToggleGroupItem>
      <ToggleGroupItem value="oldest" aria-label="Oldest">
        <IconPlaceholder
          lucide="ArrowUpIcon"
          tabler="IconArrowUp"
          hugeicons="ArrowUpIcon"
          phosphor="ArrowUpIcon"
          remixicon="RiArrowUpLine"
        />
        Oldest
      </ToggleGroupItem>
      <ToggleGroupItem value="popular" aria-label="Popular">
        <IconPlaceholder
          lucide="TrendingUpIcon"
          tabler="IconTrendingUp"
          hugeicons="TradeUpIcon"
          phosphor="TrendUpIcon"
          remixicon="RiLineChartLine"
        />
        Popular
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupWithInputAndSelect()}
  <Example title="With Input and Select">
    <div class="flex items-center gap-2">
      <Input type="search" placeholder="Search..." class="flex-1" />
      <Select items={statusItems} defaultValue={statusItems[0]}>
        <SelectTrigger class="w-32">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {#each statusItems as item (item.value)}
              <SelectItem value={item}>{item.label}</SelectItem>
            {/each}
          </SelectGroup>
        </SelectContent>
      </Select>
      <ToggleGroup value={['grid']} variant="outline">
        <ToggleGroupItem value="grid" aria-label="Grid view">Grid</ToggleGroupItem>
        <ToggleGroupItem value="list" aria-label="List view">List</ToggleGroupItem>
      </ToggleGroup>
    </div>
  </Example>
{/snippet}

{#snippet ToggleGroupVertical()}
  <Example title="Vertical">
    <ToggleGroup multiple orientation="vertical" spacing={1}>
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <IconPlaceholder
          lucide="BoldIcon"
          tabler="IconBold"
          hugeicons="TextBoldIcon"
          phosphor="TextBIcon"
          remixicon="RiBold"
        />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <IconPlaceholder
          lucide="ItalicIcon"
          tabler="IconItalic"
          hugeicons="TextItalicIcon"
          phosphor="TextItalicIcon"
          remixicon="RiItalic"
        />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <IconPlaceholder
          lucide="UnderlineIcon"
          tabler="IconUnderline"
          hugeicons="TextUnderlineIcon"
          phosphor="TextUnderlineIcon"
          remixicon="RiUnderline"
        />
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupVerticalOutline()}
  <Example title="Vertical Outline">
    <ToggleGroup
      variant="outline"
      value={['all']}
      orientation="vertical"
      size="sm"
    >
      <ToggleGroupItem value="all" aria-label="Toggle all">
        All
      </ToggleGroupItem>
      <ToggleGroupItem value="active" aria-label="Toggle active">
        Active
      </ToggleGroupItem>
      <ToggleGroupItem value="completed" aria-label="Toggle completed">
        Completed
      </ToggleGroupItem>
      <ToggleGroupItem value="archived" aria-label="Toggle archived">
        Archived
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupVerticalOutlineWithIcons()}
  <Example title="Vertical Outline With Icons">
    <ToggleGroup variant="outline" multiple orientation="vertical" size="sm">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <IconPlaceholder
          lucide="BoldIcon"
          tabler="IconBold"
          hugeicons="TextBoldIcon"
          phosphor="TextBIcon"
          remixicon="RiBold"
        />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <IconPlaceholder
          lucide="ItalicIcon"
          tabler="IconItalic"
          hugeicons="TextItalicIcon"
          phosphor="TextItalicIcon"
          remixicon="RiItalic"
        />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <IconPlaceholder
          lucide="UnderlineIcon"
          tabler="IconUnderline"
          hugeicons="TextUnderlineIcon"
          phosphor="TextUnderlineIcon"
          remixicon="RiUnderline"
        />
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupVerticalWithSpacing()}
  <Example title="Vertical With Spacing">
    <ToggleGroup
      size="sm"
      value={['top']}
      orientation="vertical"
      spacing={1}
    >
      <ToggleGroupItem value="top" aria-label="Toggle top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem value="left" aria-label="Toggle left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  </Example>
{/snippet}

{#snippet ToggleGroupFontWeightSelector()}
  <Example title="Font Weight Selector">
    <Field>
      <FieldLabel>Font Weight</FieldLabel>
      <ToggleGroup bind:value={fontWeight} variant="outline" spacing={2} size="lg">
        {#each fontWeights as { value, label, weight } (value)}
          <ToggleGroupItem
            {value}
            aria-label={label}
            class="flex size-16 flex-col items-center justify-center rounded-xl"
          >
            <span class="text-2xl leading-none {weight}">Aa</span>
            <span class="text-xs text-muted-foreground">{label}</span>
          </ToggleGroupItem>
        {/each}
      </ToggleGroup>
      <FieldDescription>
        Use <code class="rounded-md bg-muted px-1 py-0.5 font-mono">font-{fontWeight[0]}</code> to set the font weight.
      </FieldDescription>
    </Field>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render ToggleGroupBasic()}
  {@render ToggleGroupOutline()}
  {@render ToggleGroupOutlineWithIcons()}
  {@render ToggleGroupSizes()}
  {@render ToggleGroupSpacing()}
  {@render ToggleGroupWithIcons()}
  {@render ToggleGroupFilter()}
  {@render ToggleGroupDateRange()}
  {@render ToggleGroupSort()}
  {@render ToggleGroupWithInputAndSelect()}
  {@render ToggleGroupVertical()}
  {@render ToggleGroupVerticalOutline()}
  {@render ToggleGroupVerticalOutlineWithIcons()}
  {@render ToggleGroupVerticalWithSpacing()}
  {@render ToggleGroupFontWeightSelector()}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority github:sveltery/base

Copy the component

Copy the following files into src/lib/components/ui/toggle-group.

It imports the toggle component, so copy its folder too.

src/lib/components/ui/toggle-group/ToggleGroup.svelte

<script lang="ts">
  import { ToggleGroup as Primitive } from '@sveltery/base/toggle-group';
  import { cn } from 'cn';
  import { setToggleGroupContext } from './context.js';
  import type { ToggleGroupProps } from './types.js';
  let { value = $bindable(), class: classProp, variant, size, spacing = 2, orientation = 'horizontal', style, children, ...props }: ToggleGroupProps = $props();
  setToggleGroupContext({
    get variant() { return variant; },
    get size() { return size; },
    get spacing() { return spacing; },
    get orientation() { return orientation; },
  });
</script>
<Primitive
  data-slot="toggle-group"
  data-variant={variant}
  data-size={size}
  data-spacing={spacing}
  data-orientation={orientation}
  style="--gap: {spacing};{style ?? ''}"
  {orientation}
  bind:value
  {...props}
  class={cn('rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch', classProp)}
>
  {@render children?.()}
</Primitive>

src/lib/components/ui/toggle-group/ToggleGroupItem.svelte

<script lang="ts">
  import { Toggle as Primitive } from '@sveltery/base/toggle';
  import { cn } from 'cn';
  import { toggleVariants } from '../toggle/index.js';
  import { getToggleGroupContext } from './context.js';
  import type { ToggleGroupItemProps } from './types.js';
  let { class: classProp, variant = 'default', size = 'default', ...props }: ToggleGroupItemProps = $props();
  const group = getToggleGroupContext();
  const resolvedVariant = $derived(group.variant || variant);
  const resolvedSize = $derived(group.size || size);
</script>
<Primitive
  data-slot="toggle-group-item"
  data-variant={resolvedVariant}
  data-size={resolvedSize}
  data-spacing={group.spacing}
  {...props}
  class={cn('group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t', toggleVariants({ variant: resolvedVariant, size: resolvedSize }), classProp)}
/>

src/lib/components/ui/toggle-group/context.ts

import { getContext, setContext } from 'svelte';
import type { ToggleVariants } from '../toggle/index.js';

export type ToggleGroupContextValue = {
  readonly variant: ToggleVariants['variant'];
  readonly size: ToggleVariants['size'];
  readonly spacing: number;
  readonly orientation: 'horizontal' | 'vertical';
};

const key = Symbol('toggle-group');
const outsideGroup: ToggleGroupContextValue = { variant: undefined, size: undefined, spacing: 2, orientation: 'horizontal' };

export const getToggleGroupContext = (): ToggleGroupContextValue => getContext(key) ?? outsideGroup;
export const setToggleGroupContext = (value: ToggleGroupContextValue) => setContext(key, value);

src/lib/components/ui/toggle-group/types.ts

import type { ToggleGroupProps as BaseToggleGroupProps } from '@sveltery/base/toggle-group';
import type { ToggleProps } from '../toggle/index.js';
import type { ToggleVariants } from '../toggle/index.js';
export type ToggleGroupProps = BaseToggleGroupProps & ToggleVariants & { spacing?: number };
export type ToggleGroupItemProps = ToggleProps;
export type { ToggleGroupState } from '@sveltery/base/toggle-group';

src/lib/components/ui/toggle-group/index.ts

export { default as ToggleGroup } from './ToggleGroup.svelte';
export { default as ToggleGroupItem } from './ToggleGroupItem.svelte';
export type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupState } from './types.js';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group';
</script>

<ToggleGroup multiple>
  <ToggleGroupItem value="bold" aria-label="Toggle bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Toggle underline">Underline</ToggleGroupItem>
</ToggleGroup>

Value

value is the array of pressed item values. Bind it to read and write the selection. Without multiple, pressing an item releases the others.

<script lang="ts">
  let weight = $state(['normal']);
</script>

<ToggleGroup bind:value={weight} variant="outline">
  <ToggleGroupItem value="light">Light</ToggleGroupItem>
  <ToggleGroupItem value="normal">Normal</ToggleGroupItem>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
</ToggleGroup>

Variant and size

variant and size on the group apply to every item. Without them, each item uses its own.

<ToggleGroup variant="outline" size="sm" value={['all']}>
  <ToggleGroupItem value="all">All</ToggleGroupItem>
  <ToggleGroupItem value="missed">Missed</ToggleGroupItem>
</ToggleGroup>

Spacing

spacing is the gap between items in spacing units. The default is 2. With spacing={0}, outline items join into one bar.

<ToggleGroup variant="outline" spacing={0}>
  <ToggleGroupItem value="top">Top</ToggleGroupItem>
  <ToggleGroupItem value="bottom">Bottom</ToggleGroupItem>
</ToggleGroup>

Vertical

Arrow keys follow the orientation.

<ToggleGroup orientation="vertical" multiple spacing={1}>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>

ToggleGroup and ToggleGroupItem are styled on top of the Sveltery Base ToggleGroup and Toggle primitives, which own the pressed state, roving focus and accessibility. See the Base UI Toggle Group documentation for the behavior they port.