eui documentation
  1. Components
  2. EuiToggleGroupItemComponent

File

packages/components/eui-toggle-group/eui-toggle-group-item.component.ts

Description

Individual toggle item component within eui-toggle-group for segmented control interfaces. Represents a single selectable option in a group of mutually exclusive or multi-select choices. Manages checked state and emits selection events for parent toggle group coordination. Provides button-based interaction with consistent styling and accessibility. Must be used as a direct child of eui-toggle-group to participate in group selection behavior.

Basic Usage

Example :
<!-- Within toggle group -->
<eui-toggle-group>
  <eui-toggle-group-item id="option1" [isChecked]="true">
    Option 1
  </eui-toggle-group-item>
  <eui-toggle-group-item id="option2">
    Option 2
  </eui-toggle-group-item>
</eui-toggle-group>

Accessibility

  • Button element provides native keyboard support
  • Clear, descriptive text content is essential
  • Checked state is visually distinct

Notes

  • Must be direct child of eui-toggle-group
  • Requires unique id for state management
  • Selection behavior controlled by parent toggle group

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-toggle-group-item
template 
<button (click)="buttonClick()"><ng-content/></button>
styleUrl ./eui-toggle-group-item.component.scss

Index

Inputs
Outputs
HostBindings
Accessors

Inputs

id
Type : string

Unique identifier for the toggle item. Used for tracking selection state and programmatic item management.
isChecked
Type : boolean
Default value : false

Controls the checked state of the toggle item. When true, applies checked styling and indicates selection. Managed by parent toggle group for single-select mode or individually for multi-select.

Outputs

itemClick
Type : EventEmitter<EuiToggleGroupItemComponent>

Emitted when the toggle item is clicked. Payload: reference to the clicked EuiToggleGroupItemComponent instance. Allows parent toggle group to coordinate selection state across items.

HostBindings

class
Type : string

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""