form

Toggle Group

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

Preview

A preview of the Toggle Group component with interactive controls.

Preview Code
Interactive

Installation

Add the Toggle Group component to your project.

Bash
ng g @ng-cn/core:c toggle-group

Usage

Import and use the Toggle Group component in your Angular application.

Template TypeScript
template.html
<ToggleGroup type="single" [(value)]="value">
  <ToggleGroupItem value="left" aria-label="Left align">
    <lucide-icon name="align-left" class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Center align">
    <lucide-icon name="align-center" class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Right align">
    <lucide-icon name="align-right" class="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Examples

Explore different variations and use cases for the Toggle Group component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
type 'single' | 'multiple' 'single' Whether one or multiple items can be pressed.
value string | string[] — The controlled value of the toggle group.
class string — Additional CSS classes to apply.