ToggleGroup · Tinyrack Design System

Coordinate single or multiple pressed toggles by value.

Contract

Axis	Contract
Selection	One value at most by default, and tapping the selected item clears the group. `multiple` lets every item toggle independently.
State	Pass `value` to control the selection, or leave it `null` and start from `defaultValue`. Both are `List<String>`, and the default is empty.
Orientation	`orientation` takes a Flutter `Axis`; the default is `Axis.horizontal`. It sets both the layout direction and the arrow-key axis.
Keyboard	Tab reaches the group once and then the arrow keys along the orientation axis, plus Home and End, move between items. Focus wraps at the ends unless `loopFocus` is `false`, and disabled items are skipped.
Availability	The group `disabled` turns off every item, and a single `TRToggle` can be disabled on its own.

The group holds the selection and its children are public TRToggle widgets, so each item needs a stable, unique value. Like a single toggle the group submits no form value; use TRCheckboxGroup or TRRadioGroup when the selection has to travel with a form.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Loading the Flutter preview

Usage

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

class AlignmentBar extends StatefulWidget {
  const AlignmentBar({super.key});

  @override
  State<AlignmentBar> createState() => _AlignmentBarState();
}

class _AlignmentBarState extends State<AlignmentBar> {
  List<String> alignment = const ['start'];

  @override
  Widget build(BuildContext context) {
    return TRToggleGroup(
      value: alignment,
      onValueChange: (next) => setState(() => alignment = next),
      children: const [
        TRToggle(value: 'start', child: Text('Start')),
        TRToggle(value: 'center', child: Text('Center')),
        TRToggle(value: 'end', child: Text('End')),
      ],
    );
  }
}

Examples

Single selection permalink

By default only one value stays selected, and tapping the selected item clears the group. onValueChange reports the next list.

Loading the Flutter preview

Multiple selection permalink

multiple lets each item toggle independently, so the value list can hold several values at once.

Loading the Flutter preview

Vertical focus and disabled scopes permalink

A vertical group moves focus with Up and Down. loopFocus: false stops focus at the ends, disabled turns off every item, and a single item can be disabled on its own.

Loading the Flutter preview

API

TRToggleGroup properties

Prop	Type / default	Purpose
`children`	`List<TRToggle> · required`	Lists the items in visual and focus order. The type is `TRToggle`, so the group can read each item `value` and `disabled`.
`value`	`List<String>? · null`	Controls the selected values. While it is non-null the group never changes the selection on its own.
`defaultValue`	`List<String> · const []`	Sets the initial selection of an uncontrolled group. It is ignored once `value` is provided.
`onValueChange`	`ValueChanged<List<String>>? · null`	Reports the next list after an item changes. There is no way to veto the change.
`multiple`	`bool · false`	Allows each item to be toggled independently instead of keeping at most one value.
`orientation`	`Axis · Axis.horizontal`	Lays the items out along this axis and selects the arrow keys that move focus.
`loopFocus`	`bool · true`	Wraps arrow-key focus at the first and last enabled item. Set it to `false` to stop at the ends.
`disabled`	`bool · false`	Disables every item in the group, on top of any item that is disabled on its own.