Toggle Group

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

## Installation

npm

npx @galaxy-stack/nebula-cli@latest add toggle-group

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add toggle-group

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add toggle-group

bun

bunx @galaxy-stack/nebula-cli@latest add toggle-group

global

# If you have installed galaxy-design globally
galaxy-design add toggle-group

Usage

Vue

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
import { Bold, Italic, Underline } from 'lucide-vue-next'
</script>

<template>
  <ToggleGroup type="multiple">
    <ToggleGroupItem value="bold" aria-label="Toggle bold">
      <Bold class="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="italic" aria-label="Toggle italic">
      <Italic class="h-4 w-4" />
    </ToggleGroupItem>
    <ToggleGroupItem value="underline" aria-label="Toggle underline">
      <Underline class="h-4 w-4" />
    </ToggleGroupItem>
  </ToggleGroup>
</template>

React

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { Bold, Italic, Underline } from "lucide-react"

export default function App() {
  return (
    <ToggleGroup type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <Bold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Angular

import { Component } from '@angular/core';
import { ToggleGroupComponent, ToggleGroupItemComponent } from '@/components/ui/toggle-group';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToggleGroupComponent, ToggleGroupItemComponent],
  template: `
    <ui-toggle-group type="multiple">
      <ui-toggle-group-item value="bold" aria-label="Toggle bold">
        <lucide-icon name="bold" class="h-4 w-4"></lucide-icon>
      </ui-toggle-group-item>
      <ui-toggle-group-item value="italic" aria-label="Toggle italic">
        <lucide-icon name="italic" class="h-4 w-4"></lucide-icon>
      </ui-toggle-group-item>
      <ui-toggle-group-item value="underline" aria-label="Toggle underline">
        <lucide-icon name="underline" class="h-4 w-4"></lucide-icon>
      </ui-toggle-group-item>
    </ui-toggle-group>
  `
})
export class AppComponent {}

Examples

Default

Vue

<ToggleGroup type="single">
  <ToggleGroupItem value="left">
    <AlignLeft class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight class="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

React

<ToggleGroup type="single">
  <ToggleGroupItem value="left">
    <AlignLeft className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Angular

<ui-toggle-group type="single">
  <ui-toggle-group-item value="left">
    <lucide-icon name="align-left" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="center">
    <lucide-icon name="align-center" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="right">
    <lucide-icon name="align-right" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
</ui-toggle-group>

Outline

Vue

<ToggleGroup type="single" variant="outline">
  <ToggleGroupItem value="left">
    <AlignLeft class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight class="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

React

<ToggleGroup type="single" variant="outline">
  <ToggleGroupItem value="left">
    <AlignLeft className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Angular

<ui-toggle-group type="single" variant="outline">
  <ui-toggle-group-item value="left">
    <lucide-icon name="align-left" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="center">
    <lucide-icon name="align-center" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="right">
    <lucide-icon name="align-right" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
</ui-toggle-group>

Small

Vue

<ToggleGroup type="single" size="sm">
  <ToggleGroupItem value="left">
    <AlignLeft class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight class="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

React

<ToggleGroup type="single" size="sm">
  <ToggleGroupItem value="left">
    <AlignLeft className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Angular

<ui-toggle-group type="single" size="sm">
  <ui-toggle-group-item value="left">
    <lucide-icon name="align-left" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="center">
    <lucide-icon name="align-center" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="right">
    <lucide-icon name="align-right" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
</ui-toggle-group>

Large

Vue

<ToggleGroup type="single" size="lg">
  <ToggleGroupItem value="left">
    <AlignLeft class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight class="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

React

<ToggleGroup type="single" size="lg">
  <ToggleGroupItem value="left">
    <AlignLeft className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Angular

<ui-toggle-group type="single" size="lg">
  <ui-toggle-group-item value="left">
    <lucide-icon name="align-left" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="center">
    <lucide-icon name="align-center" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="right">
    <lucide-icon name="align-right" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
</ui-toggle-group>

Disabled

Vue

<ToggleGroup type="single" disabled>
  <ToggleGroupItem value="left">
    <AlignLeft class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight class="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

React

<ToggleGroup type="single" disabled>
  <ToggleGroupItem value="left">
    <AlignLeft className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center">
    <AlignCenter className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right">
    <AlignRight className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Angular

<ui-toggle-group type="single" [disabled]="true">
  <ui-toggle-group-item value="left">
    <lucide-icon name="align-left" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="center">
    <lucide-icon name="align-center" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="right">
    <lucide-icon name="align-right" class="h-4 w-4"></lucide-icon>
  </ui-toggle-group-item>
</ui-toggle-group>

API Reference

ToggleGroup Props

Prop	Type	Default	Description	Frameworks
type	'single' | 'multiple'	-	Toggle type (single or multiple selection)	All
value	string[]	-	Controlled value	All
defaultValue	string[]	-	Default value for uncontrolled usage	All
onValueChange	(value: string[]) => void	-	Called when value changes	All
disabled	boolean	false	Disables the group	All
variant	'default' | 'outline'	'default'	Visual style variant	All
size	'default' | 'sm' | 'lg'	'default'	Size variant	All
className	string	''	Additional CSS classes	All

ToggleGroupItem Props

Prop	Type	Default	Description	Frameworks
value	string	-	Item value	All
disabled	boolean	false	Disables the item	All
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	Additional CSS classes	All

Accessibility

Uses roving tabindex to manage focus movement among items.

Keyboard Interactions

Key	Description
Tab	Moves focus to either the pressed item or the first item in the group
Space	Activates/deactivates the item
Enter	Activates/deactivates the item
ArrowDown	Moves focus to the next item in the group
ArrowRight	Moves focus to the next item in the group
ArrowUp	Moves focus to the previous item in the group
ArrowLeft	Moves focus to the previous item in the group
Home	Moves focus to the first item
End	Moves focus to the last item

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)