Radio Group

Coordinate a mutually exclusive selection across radios.

Contract

The group holds the selected value and its children are public TRRadio widgets, so each option needs a unique value. Unlike the web component it has no required prop, no form association, and no built-in validation: wrap it in TRField to add a visible label, and compute the error message from your own state.

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';

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

  @override
  State<DeploymentRack> createState() => _DeploymentRackState();
}

class _DeploymentRackState extends State<DeploymentRack> {
  String rack = 'alpha';

  @override
  Widget build(BuildContext context) {
    return TRField(
      label: 'Deployment rack',
      control: TRRadioGroup(
        name: 'rack',
        value: rack,
        onValueChange: (next) => setState(() => rack = next),
        children: const [
          TRRadio(
            value: 'alpha',
            label: TRText('Rack alpha', variant: TRTextVariant.bodySm),
          ),
          TRRadio(
            value: 'beta',
            label: TRText('Rack beta', variant: TRTextVariant.bodySm),
          ),
        ],
      ),
    );
  }
}

Examples

API