Primitives

Toggle Group

The toggle group primitive is a collection of toggle buttons that can be used to select one or more options.

Import

Import the ToggleGroup primitives from ng-primitives/toggle-group.

import { NgpToggleGroup, NgpToggleGroupItem } from 'ng-primitives/toggle-group';

Usage

Assemble the toggle-group directives in your template.

<div ngpToggleGroup>
  <button ngpToggleGroupItem ngpToggleGroupItemValue="1">Option 1</button>
  <button ngpToggleGroupItem ngpToggleGroupItemValue="2">Option 2</button>
  <button ngpToggleGroupItem ngpToggleGroupItemValue="3">Option 3</button>
</div>

Reusable Component

Create a reusable component that uses the toggle group directives.

Schematics

Generate a reusable toggle group component using the Angular CLI.

ng g ng-primitives:primitive toggle-group

Examples

Here are some additional examples of how to use the Toggle Group primitives.

Multiple Selection

The toggle group can be configured to allow multiple selections by setting the ngpToggleGroupType input to multiple.

API Reference

The following directives are available to import from the ng-primitives/toggle-group package:

NgpToggleGroup

  • Selector: [ngpToggleGroup]
  • Exported As: ngpToggleGroup
The orientation of the toggle group. he selected value(s) of the toggle group. The type of the toggle group, whether only one item can be selected or multiple. Whether the toggle group is disabled.

Data Attributes

The following data attributes are available to style the toggle group:

Attribute Description Value
data-disabled Applied when the toggle group is disabled. -
data-orientation The orientation of the toggle group. horizontal | vertical
data-type The type of the toggle group. single | multiple

NgpToggleGroupItem

  • Selector: [ngpToggleGroupItem]
  • Exported As: ngpToggleGroupItem
The value of the toggle group item. Whether the toggle group item is disabled.

Data Attributes

The following data attributes are available to style the toggle group item:

Attribute Description Value
data-disabled Applied when the toggle group item is disabled. -
data-selected Applied when the toggle group item is selected. -

Global Configuration

You can configure the default options for all toggle-groups in your application by using the provideToggleGroupConfig function in a providers array.

import { provideToggleGroupConfig } from 'ng-primitives/toggle-group';

bootstrapApplication(AppComponent, {
  providers: [
    provideToggleGroupConfig({
      orientation: 'vertical',
      type: 'multiple',
    }),
  ],
});

NgpToggleGroupConfig

The default orientation of the toggle group. The default type of the toggle group.

Keyboard Interaction

  • Tab - Moves focus to the first toggle group item in the toolbar.
  • Arrow Down - Moves focus to the next toggle group item (vertical orientation).
  • Arrow Up - Moves focus to the previous toggle group item (vertical orientation).
  • Arrow Right - Moves focus to the next toggle group item (horizontal orientation).
  • Arrow Left - Moves focus to the previous toggle group item (horizontal orientation).
  • Home - Moves focus to the first toggle group item.
  • End - Moves focus to the last toggle group item.

Copyright © 2025 Angular Primitives