Toggle Group

A set of two-state buttons that can be toggled on or off.

The group is a single Tab stop, entered on the first pressed item (or the last focused one): the arrow keys move the focus between the items and wrap around (a horizontal group uses all four arrows, like shadcn/ui, while a vertical group ignores Left and Right), Home/PageUp and End/PageDown move it to the first and last item, and disabled items are skipped. When the items are joined (spacing is 0), they draw the focus ring inside their bounds, because the next item would paint over a ring drawn around them.

Preview

Code

ShadToggleGroup<String>.multiple(
  onChanged: (values) => print(values),
  items: const [
    ShadToggleGroupItem(
      value: 'bold',
      child: Icon(LucideIcons.bold, semanticLabel: 'Toggle bold'),
    ),
    ShadToggleGroupItem(
      value: 'italic',
      child: Icon(LucideIcons.italic, semanticLabel: 'Toggle italic'),
    ),
    ShadToggleGroupItem(
      value: 'underline',
      child: Icon(LucideIcons.underline, semanticLabel: 'Toggle underline'),
    ),
  ],
)

Outline

Preview

Code

ShadToggleGroup<String>.multiple(
  variant: ShadToggleVariant.outline,
  items: const [
    ShadToggleGroupItem(
      value: 'bold',
      child: Icon(LucideIcons.bold, semanticLabel: 'Toggle bold'),
    ),
    ShadToggleGroupItem(
      value: 'italic',
      child: Icon(LucideIcons.italic, semanticLabel: 'Toggle italic'),
    ),
    ShadToggleGroupItem(
      value: 'underline',
      child: Icon(LucideIcons.underline, semanticLabel: 'Toggle underline'),
    ),
  ],
)

Single

At most one item can be pressed. Set allowDeselection: false so the pressed item can’t be turned off, and pass an initialValue to keep one item pressed from the start.

Preview

Code

ShadToggleGroup<String>(
  initialValue: 'center',
  onChanged: (value) => print(value),
  items: const [
    ShadToggleGroupItem(
      value: 'left',
      child: Icon(LucideIcons.textAlignStart, semanticLabel: 'Align left'),
    ),
    ShadToggleGroupItem(
      value: 'center',
      child: Icon(LucideIcons.textAlignCenter, semanticLabel: 'Align center'),
    ),
    ShadToggleGroupItem(
      value: 'right',
      child: Icon(LucideIcons.textAlignEnd, semanticLabel: 'Align right'),
    ),
  ],
)

Vertical

Preview

Code

ShadToggleGroup<String>.multiple(
  variant: ShadToggleVariant.outline,
  axis: Axis.vertical,
  items: const [
    ShadToggleGroupItem(
      value: 'bold',
      child: Icon(LucideIcons.bold, semanticLabel: 'Toggle bold'),
    ),
    ShadToggleGroupItem(
      value: 'italic',
      child: Icon(LucideIcons.italic, semanticLabel: 'Toggle italic'),
    ),
    ShadToggleGroupItem(
      value: 'underline',
      child: Icon(LucideIcons.underline, semanticLabel: 'Toggle underline'),
    ),
  ],
)

Spacing

Preview

Code

ShadToggleGroup<String>.multiple(
  variant: ShadToggleVariant.outline,
  spacing: 8,
  items: const [
    ShadToggleGroupItem(
      value: 'bold',
      child: Icon(LucideIcons.bold, semanticLabel: 'Toggle bold'),
    ),
    ShadToggleGroupItem(
      value: 'italic',
      child: Icon(LucideIcons.italic, semanticLabel: 'Toggle italic'),
    ),
    ShadToggleGroupItem(
      value: 'underline',
      child: Icon(LucideIcons.underline, semanticLabel: 'Toggle underline'),
    ),
  ],
)

Disabled

Preview

Code

ShadToggleGroup<String>.multiple(
  enabled: false,
  items: const [
    ShadToggleGroupItem(
      value: 'bold',
      child: Icon(LucideIcons.bold, semanticLabel: 'Toggle bold'),
    ),
    ShadToggleGroupItem(
      value: 'italic',
      child: Icon(LucideIcons.italic, semanticLabel: 'Toggle italic'),
    ),
    ShadToggleGroupItem(
      value: 'underline',
      child: Icon(LucideIcons.underline, semanticLabel: 'Toggle underline'),
    ),
  ],
)