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

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

  • Selector: [ngpToggleGroup]
  • Exported As: ngpToggleGroup
ngpToggleGroupOrientation
NgpOrientation

The orientation of the toggle group.

ngpToggleGroupAllowDeselection
boolean
default: "true"

Whether toggle buttons can be deselected. If set to `false`, clicking a selected toggle button will not deselect it.

ngpToggleGroupType
"single" | "multiple"

The type of the toggle group, whether only one item can be selected or multiple.

ngpToggleGroupValue
string[]

The selected value(s) of the toggle group.

ngpToggleGroupDisabled
boolean

Whether the toggle group is disabled.

ngpToggleGroupValueChange
string[]

Emits when the value of the toggle group changes.

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
ngpToggleGroupItemValue
string | undefined

The value of the item.

ngpToggleGroupItemDisabled
boolean

Whether the 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

orientation
'horizontal' | 'vertical'
default: "horizontal"

The default orientation of the toggle group.

type
'single' | 'multiple'
default: "single"

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