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.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• example-styles: 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.

Accessibility

The toggle group uses role="group" on the container and role="radio" with aria-checked on each item. Keyboard navigation follows the roving tabindex pattern.

Keyboard Interactions

• Tab: Move focus into the toggle group to the active or first item.
• ArrowDown: Move focus to the next item (vertical orientation).
• ArrowUp: Move focus to the previous item (vertical orientation).
• ArrowRight: Move focus to the next item (horizontal orientation).
• ArrowLeft: Move focus to the previous item (horizontal orientation).
• Home: Move focus to the first item.
• End: Move focus to the last item.