Tinyrack

Checkbox Group

Coordinate multiple checkbox values with controlled, uncontrolled, and form-integrated state.

Coordinate several independently toggleable values as one controlled, uncontrolled, or named form field.

Contract

AxisContract
State ownershipUse defaultValue when the group owns selection, or pair value with onValueChange for controlled state.
AvailabilityGroup disabled blocks every child. Child readOnly keeps a value visible without allowing changes.
FormsSet name to register the selected string list with the nearest TRForm; disabled groups are omitted.
Single selectionUse TRRadioGroup when exactly one value may be selected.

Give every child TRCheckbox a distinct value and visible label. Use MergeSemantics to expose each checkbox and adjacent label as one semantic unit.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Usage

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

TRCheckboxGroup(
  defaultValue: const ['metrics'],
  onValueChange: setValues,
  children: const [
    MergeSemantics(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        spacing: TRSpacing.small,
        children: [
          TRCheckbox(value: 'metrics'),
          TRText('Metrics', variant: TRTextVariant.bodySm),
        ],
      ),
    ),
    MergeSemantics(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        spacing: TRSpacing.small,
        children: [
          TRCheckbox(value: 'alerts'),
          TRText('Alerts', variant: TRTextVariant.bodySm),
        ],
      ),
    ),
  ],
)

Examples

Option list permalink

Pair each checkbox with a visible label and use defaultValue when the group should own its initial selection.

Editable, read-only, and disabled permalink

Set readOnly on individual checkboxes when values must remain visible, or disable the group to block every child.

Choose one or two values permalink

Control the value list when product rules require a minimum and maximum selection count.

Select all and mixed state permalink

Drive a separate checkbox from the controlled value list to provide select-all and indeterminate states.

Collect a named form value permalink

Give the group a name so TRFormState.save() includes its selected string list.

API

Selection and interaction

PropType / defaultPurpose
value, defaultValueList<String>?, List<String> = const []Control or initialize the selected values.
onValueChangeValueChanged<List<String>>?Report the next selected string list.
childrenList<Widget>Only descendant TRCheckbox widgets with non-null values participate in selection.
disabledbool = falseDisable every child and omit the named group from TRFormValues.
nameString?Register the selected list with the nearest TRForm.