Segment Control · WB Design Wiki

Level: molecule.

Purpose and use

Select one option from a compact set of peers. Use tabs for switching documented panels and checkboxes when multiple independent selections are allowed.

Anatomy, behavior, and accessibility

Required items render native radio buttons in a radiogroup, with optional icons, descriptions and badges. S suppresses descriptions; hug/fixed sets width treatment.
Selection resolves from value, then internal selection, then the first enabled item. A changed enabled choice emits valueChange and segmentSelected; selecting the current item does nothing. A supplied value remains parent-controlled.
Arrow keys move and select cyclically among enabled options; Home/End choose first/last. Only the selected option is in the normal Tab order. Disabled items cannot be selected. focusedValue is a visual helper, not a DOM focus command.
Use stable unique string/number values and clear option labels. Do not place required explanatory text only in descriptions when S is used.

Open Questions

The radiogroup has no accessible-name input or linked label. A controlled value that is missing or disabled can leave no selected tabbable option; the parent should provide an enabled value until that behavior is changed.

Local component contract

This is the active owned contract for component.segment-control. The API below is verified against the current local implementation, focused test and story. The Source commit 0112cba0779a2d2a4b6c7a17243201694344d70a remains migration provenance, not the runtime owner.

Classes and selectors

WblSegmentControlComponent — wbl-segment-control (src/app/design-system/patterns/segment-control/segment-control.component.ts).

Inputs

WblSegmentControlComponent.size = input<WblSegmentControlSize>('L')
WblSegmentControlComponent.width = input<WblSegmentControlWidth>('hug')
WblSegmentControlComponent.items = input.required<WblSegmentControlItem[]>()
WblSegmentControlComponent.value = input<WblSegmentControlValue | null>(null)
WblSegmentControlComponent.focusedValue = input<WblSegmentControlValue | null>(null)

Public types and allowed values

type WblSegmentControlSize = 'L' | 'M' | 'S';
type WblSegmentControlWidth = 'hug' | 'fixed';
interface WblSegmentControlItem {
  value: WblSegmentControlValue;
  label: string;
  description?: string;
  iconName?: WblIconName;
  badgeLabel?: string | number;
  disabled?: boolean;
}
type WblSegmentControlValue = string | number;

Icon-name inputs use WblIconName from the shared icon contract; choose a key present in the owned icon pack, not an arbitrary external icon name.

Models

None.

Outputs

WblSegmentControlComponent.valueChange = output<WblSegmentControlValue>()
WblSegmentControlComponent.segmentSelected = output<WblSegmentControlItem>()

Slots and projection markers

The exact template has no Angular content-projection slot.

Local evidence

Code: src/app/design-system/patterns/segment-control/segment-control.component.ts.
Focused test: src/app/design-system/patterns/segment-control/segment-control.component.spec.ts.
Public export: export * from './patterns/segment-control/segment-control.component'; in src/app/design-system/index.ts.
Storybook: storybook/stories/segment-control.stories.ts (Design System/Patterns/wbl-segment-control).

Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.

Provenance

The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.