Components / Toggle Group

Toggle Group

Single or multiple pressed-state buttons with logical orientation and focus movement.

example.component.html

html

<aevko-toggle-group label="Text alignment" type="single" [(value)]="alignment">
  <button aevkoToggleGroupItem value="left">
    Left
  </button>
  <button aevkoToggleGroupItem value="center">
    Center
  </button>
</aevko-toggle-group>

Installation

npx aevko-ui@latest add toggle-group --yes

Source ownership

Customization

Choose single or multiple selection, bind the value array and replace item content with text, SVG or custom Angular content as needed.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`required`	Accessible name for the button group.
`type`	`'single' \| 'multiple'`	`'single'`	Controls exclusive or additive selection.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Sets layout and arrow-key focus axis.
`value`	`model<readonly string[]>`	`[]`	Selected item values with two-way binding.
`item value`	`string`	`required`	Stable value emitted by each native button.

Accessibility contract

Accessibility

Included behavior

A named group contains native buttons with aria-pressed; arrows, Home and End move focus.

Your responsibility

Provide a concise group label and accessible names for icon-only items; keep selected values synchronized with application state.

Back to all components