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

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

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

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

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.