Component

Segmented

A compact single-choice switch. Feed options as data or declare them as items, bind the value, add icons, size it, stretch it full width, and disable the whole control or single options. Arrow keys move the selection.

Options & value

Selected: all

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbSegmentedImports, type HbSegmentedOption } from '@herbst/ui';

@Component({
  selector: 'hb-demo-segmented-basic',
  imports: [HbSegmentedImports],
  template: `
    <div class="flex flex-col items-start gap-2">
      <hb-segmented [hbOptions]="options" [(hbValue)]="view" hbAriaLabel="Catalogue view" />
      <p class="font-mono text-[12px] text-muted-foreground">Selected: {{ view() }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoSegmentedBasicComponent {
  protected readonly view = signal('all');
  protected readonly options: HbSegmentedOption[] = [
    { value: 'all', label: 'All' },
    { value: 'photos', label: 'Photos' },
    { value: 'videos', label: 'Videos' },
    { value: 'archived', label: 'Archived', disabled: true },
  ];
}

Declarative items & icons

Sizes, fluid & disabled

API reference

hb-segmented

Property	Description	Type	Default
[hbOptions]	The choices as data. Each is { value, label, disabled?, icon? }. Omit to declare hb-segmented-item children instead.	HbSegmentedOption[]	[]
[(hbValue)]	The selected value, two-way bound. Also works as a form control via ngModel / formControl.	string	''
[hbSize]	The control height and text scale.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbFluid]	Stretch to the full container width, dividing it equally between options.	boolean	false
[hbDisabled]	Disable the whole control.	boolean	false
[hbAriaLabel]	The accessible label for the radiogroup.	string	''

hb-segmented-item

Property	Description	Type	Default
[value]	The value contributed by this option (required).	string	required
[label] / [hbIcon]	The visible text and an optional leading icon name.	string	''
[hbDisabled]	Disable this single option.	boolean	false