Toggle Group

ToggleGroup groups related ToggleGroupItem toggles with shared selection state. Built on Ark UI toggle-group, sourced from Shark UI. Pass multiple for multi-select and attached for a segmented look.

// apps/docs/src/components/examples/toggle-group/default/react.tsx
import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-react';
import { Bold, Italic, Underline } from 'lucide-react';

export default function ReactToggleGroupDefault() {
  return (
    <ToggleGroup defaultValue={['bold']}>
      <ToggleGroupItem value="bold" aria-label="Bold">
        <Bold />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Italic">
        <Italic />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Underline">
        <Underline />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

<!-- apps/docs/src/components/examples/toggle-group/default/svelte.svelte -->
<script lang="ts">
  import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-svelte';
  import { Bold, Italic, Underline } from 'lucide-svelte';
</script>

<ToggleGroup defaultValue={['bold']}>
  <ToggleGroupItem value="bold" aria-label="Bold"><Bold /></ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic"><Italic /></ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Underline"><Underline /></ToggleGroupItem>
</ToggleGroup>

Examples

Attached

// apps/docs/src/components/examples/toggle-group/attached/react.tsx
import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-react';
import { AlignLeft, AlignCenter, AlignRight } from 'lucide-react';

export default function ReactToggleGroupAttached() {
  return (
    <ToggleGroup attached defaultValue={['left']}>
      <ToggleGroupItem value="left" variant="outline" aria-label="Align left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" variant="outline" aria-label="Align center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" variant="outline" aria-label="Align right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

<!-- apps/docs/src/components/examples/toggle-group/attached/svelte.svelte -->
<script lang="ts">
  import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-svelte';
  import { AlignLeft, AlignCenter, AlignRight } from 'lucide-svelte';
</script>

<ToggleGroup attached defaultValue={['left']}>
  <ToggleGroupItem value="left" variant="outline" aria-label="Align left"><AlignLeft /></ToggleGroupItem>
  <ToggleGroupItem value="center" variant="outline" aria-label="Align center"><AlignCenter /></ToggleGroupItem>
  <ToggleGroupItem value="right" variant="outline" aria-label="Align right"><AlignRight /></ToggleGroupItem>
</ToggleGroup>

Disabled

// apps/docs/src/components/examples/toggle-group/disabled/react.tsx
import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-react';

export default function ReactToggleGroupDisabled() {
  return (
    <ToggleGroup defaultValue={['a']} disabled>
      <ToggleGroupItem value="a">Option A</ToggleGroupItem>
      <ToggleGroupItem value="b">Option B</ToggleGroupItem>
      <ToggleGroupItem value="c">Option C</ToggleGroupItem>
    </ToggleGroup>
  );
}

<!-- apps/docs/src/components/examples/toggle-group/disabled/svelte.svelte -->
<script lang="ts">
  import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-svelte';
</script>

<ToggleGroup defaultValue={['a']} disabled>
  <ToggleGroupItem value="a">Option A</ToggleGroupItem>
  <ToggleGroupItem value="b">Option B</ToggleGroupItem>
  <ToggleGroupItem value="c">Option C</ToggleGroupItem>
</ToggleGroup>

Multiple

// apps/docs/src/components/examples/toggle-group/multiple/react.tsx
import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-react';
import { Bold, Italic, Underline } from 'lucide-react';

export default function ReactToggleGroupMultiple() {
  return (
    <ToggleGroup multiple defaultValue={['bold', 'italic']}>
      <ToggleGroupItem value="bold" aria-label="Bold">
        <Bold />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Italic">
        <Italic />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Underline">
        <Underline />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

<!-- apps/docs/src/components/examples/toggle-group/multiple/svelte.svelte -->
<script lang="ts">
  import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-svelte';
  import { Bold, Italic, Underline } from 'lucide-svelte';
</script>

<ToggleGroup multiple defaultValue={['bold', 'italic']}>
  <ToggleGroupItem value="bold" aria-label="Bold"><Bold /></ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic"><Italic /></ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Underline"><Underline /></ToggleGroupItem>
</ToggleGroup>

Vertical

// apps/docs/src/components/examples/toggle-group/vertical/react.tsx
import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-react';

export default function ReactToggleGroupVertical() {
  return (
    <ToggleGroup orientation="vertical" defaultValue={['a']}>
      <ToggleGroupItem value="a">Option A</ToggleGroupItem>
      <ToggleGroupItem value="b">Option B</ToggleGroupItem>
      <ToggleGroupItem value="c">Option C</ToggleGroupItem>
    </ToggleGroup>
  );
}

<!-- apps/docs/src/components/examples/toggle-group/vertical/svelte.svelte -->
<script lang="ts">
  import { ToggleGroup, ToggleGroupItem } from '@cloudvoyant/helical-svelte';
</script>

<ToggleGroup orientation="vertical" defaultValue={['a']}>
  <ToggleGroupItem value="a">Option A</ToggleGroupItem>
  <ToggleGroupItem value="b">Option B</ToggleGroupItem>
  <ToggleGroupItem value="c">Option C</ToggleGroupItem>
</ToggleGroup>

API Reference

ToggleGroup — value / defaultValue (string[]), onValueChange, multiple, disabled, orientation (horizontal | vertical), attached.

ToggleGroupItem — value (required), variant (default | outline), size (default | sm | lg), disabled.