Dowe

CONTROL

ToggleGroup

ToggleGroup turns structural item entries into one accessible string-valued segmented control for modes, filters, and compact workflow choices.

ONE VALUE

Signal-backed selection

Bind value to a string Signal when the selected mode drives other content on the page.

PLAYGROUND

Switch a view mode

The selected value is shared with the page Signal, so the control and its downstream preview stay on one source-of-truth path.

Active mode

signal mode value:"map"
ToggleGroup value:mode variant:"soft" scheme:"muted" size:"md" wide:true ariaLabel:"View mode"
  item id:"map" label:"Map" icon:"file"
  item id:"list" label:"List" icon:"search"
  item id:"stats" label:"Stats" icon:"settings"

ADVANCED PATTERNS

Use selection where layout changes

Use horizontal groups for compact filters and vertical groups when the labels need more room.

FILTERS

Content density

ORIENTATION

Workspace sections

DISABLED

Preserve the choice

ToggleGroup selected:"all" variant:"outlined" scheme:"primary" size:"sm" ariaLabel:"Content density"
  item id:"all" label:"All"
  item id:"unread" label:"Unread"
  item id:"saved" label:"Saved"

ToggleGroup selected:"overview" variant:"soft" scheme:"success" size:"md" vertical:true ariaLabel:"Workspace section"
  item id:"overview" label:"Overview" icon:"file"
  item id:"activity" label:"Activity" icon:"search"
  item id:"settings" label:"Settings" icon:"settings"

STRUCTURE

Items are explicit

Every item requires a stable id and a visible label. Icons are optional and use validated Solar names.

ACCESSIBILITY

Name the group

Set ariaLabel when the visible labels do not fully explain the choice to assistive technology.

API

Props

ToggleGroup also accepts the applicable common spacing, sizing, border, visibility, and accessibility props.

Prop	Type	Default
No data There are no records to display

Previous Record

Next Accordion

No data