Radio

Starting Flutter example…

Live Flutter from the pinned Remix component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

A radio button component for selecting a single option from a group.

When to use this

Single selection: Allow users to choose one option from multiple choices
Form inputs: Collect single-choice preferences in forms
Settings: Enable users to select one configuration option
Surveys: Gather responses with mutually exclusive options

Basic implementation

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

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

  @override
  State<RadioExample> createState() => _RadioExampleState();
}

class _RadioExampleState extends State<RadioExample> {
  String? _selectedValue;

  @override
  Widget build(BuildContext context) {
    return RemixRadioGroup<String>(
      groupValue: _selectedValue,
      onChanged: (value) {
        setState(() {
          _selectedValue = value;
        });
      },
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        spacing: 16,
        mainAxisSize: MainAxisSize.min,
        children: [
          RemixRadio<String>(value: 'option1', label: 'Option 1', style: style),
          RemixRadio<String>(value: 'option2', label: 'Option 2', style: style),
        ],
      ),
    );
  }

  RadioStyler get style {
    return RadioStyler()
        .borderRadius(.all(const Radius.circular(30)))
        .size(22, 22)
        .border(
          BoxBorderMix.all(
            BorderSideMix()
                .color(Colors.blueGrey.shade100)
                .width(2.4)
                .strokeAlign(BorderSide.strokeAlignInside),
          ),
        )
        .onHovered(
          RadioStyler().shadow(
            BoxShadowMix()
                .color(Colors.blueGrey.shade50.withValues(alpha: 0.7))
                .blurRadius(0)
                .spreadRadius(9),
          ),
        )
        .onPressed(
          RadioStyler().border(
            BoxBorderMix.all(
              BorderSideMix()
                  .color(Colors.blueGrey.shade100)
                  .width(6)
                  .strokeAlign(BorderSide.strokeAlignInside),
            ),
          ),
        )
        .onSelected(
          RadioStyler().border(
            BoxBorderMix.all(
              BorderSideMix()
                  .color(Colors.blueAccent.shade700)
                  .width(6)
                  .strokeAlign(BorderSide.strokeAlignInside),
            ),
          ),
        );
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal variants

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
import 'ui/ui.dart';

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

  @override
  State<FortalRadioExample> createState() => _FortalRadioExampleState();
}

class _FortalRadioExampleState extends State<FortalRadioExample> {
  String? _selected;

  @override
  Widget build(BuildContext context) {
    return RemixRadioGroup<String>(
      groupValue: _selected,
      onChanged: (value) => setState(() => _selected = value),
      child: Column(
        children: [
          FortalRadio.surface(value: 'surface', label: 'Surface'),
          FortalRadio.soft(value: 'soft', label: 'Soft'),
        ],
      ),
    );
  }
}

See the fortalRadioStyle source code for all available options.

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

// Radio Group
RemixRadioGroup<T> remixRadioGroupConstructor<T>({
  Key? key,
  required T? groupValue,
  ValueChanged<T?>? onChanged,
  required Widget child,
}) => throw UnimplementedError();

// Radio Button
RemixRadio<T> remixRadioConstructor<T>({
  Key? key,
  required T value,
  String? label,
  String? semanticLabel,
  Size minimumTapTargetSize = Size.zero,
  bool enabled = true,
  bool toggleable = false,
  MouseCursor? mouseCursor,
  FocusNode? focusNode,
  bool autofocus = false,
  bool excludeSemantics = false,
  RadioStyler style = const RadioStyler.create(),
  RadioSpec? styleSpec,
}) => throw UnimplementedError();

Properties

`groupValue` → `T?`

Required. The currently selected value for the radio group.

`onChanged` → `ValueChanged<T?>?`

Optional. Called when a radio button in the group is selected. When omitted, the radio group is disabled.

Required. The child widget that contains the radio buttons.

`style` → `RadioStyler`

Optional. The style configuration for the radio button. Customize colors, borders, and state-based styling.

`styleSpec` → `RadioSpec?`

Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.

`key` → `Key?`

Optional. Controls how one widget replaces another widget in the tree.

`value` → `T`

Required. The value represented by this radio button.

`autofocus` → `bool`

Optional. Whether the radio button should automatically request focus when it is created.

`enabled` → `bool`

Optional. Whether this radio button is enabled.

`toggleable` → `bool`

Optional. Whether the radio button is toggleable (can be unselected).

`focusNode` → `FocusNode?`

Optional. The focus node for the radio button.

`mouseCursor` → `MouseCursor?`

Optional. The mouse cursor to use when hovering over the radio button.

Optional. A visible label included in the same pointer, hover, press, focus, and semantics target as the radio button. It becomes the accessible name unless semanticLabel overrides it. Provide label or semanticLabel; neither may be blank.

`semanticLabel` → `String?`

Optional. Overrides the accessible name derived from label, or names the radio button when there is no label. Must be nonblank — an adjacent Text is not the accessible name.

`minimumTapTargetSize` → `Size`

Optional. Minimum pointer, focus, and semantics target size. Defaults to Size.zero, which keeps the radio button's own geometry, unlike RemixCheckbox, which defaults to Size.square(48). Pass Size.square(48) to satisfy common Android and iOS target-size guidance.