Radio · Tinyrack Design System

Offer one option inside a mutually exclusive radio group.

Contract

Axis	Contract
Selection	Selected while the group value equals this `value`. A radio never sets its own state; the group does.
Label	`label` renders beside the glyph as one tappable target and one semantic node. Compound labels align the glyph with their first body line by default; choose `TRRadioLabelAlignment.center` for non-text content. Style text with `TRText`.
Size	`uiSize` takes `TRUiSize.md` or `TRUiSize.lg`; the default is `md`. Match it to the controls around the option.
Availability	`disabled` and `readOnly` combine with the values the group sets. `readOnly` keeps the option focusable and its value intact; `disabled` blocks interaction and dims the option.
Keyboard	Space selects the focused option on key release, matching a native radio. Moving between options belongs to `TRRadioGroup`.

A radio only means something inside TRRadioGroup, which owns the selected value. Give every option a value that is unique within its group and a label a reader can act on. For a standalone on or off control use TRCheckbox or TRSwitch instead.

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

TRRadioGroup(
  defaultValue: 'weekly',
  onValueChange: setSchedule,
  children: const [
    TRRadio(
      value: 'weekly',
      label: TRText('Weekly', variant: TRTextVariant.bodySm),
    ),
    TRRadio(
      value: 'monthly',
      label: TRText('Monthly', variant: TRTextVariant.bodySm),
    ),
  ],
)

Examples

Unselected and selected permalink

Selection is meaningful only against the value the group holds, so compare both options inside one group.

Loading the Flutter preview

Medium and large permalink

Match md or lg to the density of the controls around the option.

Loading the Flutter preview

Editable, read only, and disabled permalink

Set availability on one option when it differs from the rest; otherwise set it once on the group.

Loading the Flutter preview

API

TRRadio properties

Prop	Type / default	Purpose
`value`	`String · required`	Identifies the option inside its group. Keep it unique and stable.
`label`	`Widget? · null`	Renders beside the glyph and joins it as one tap target and one semantic node. Without it the option shows only the glyph.
`uiSize`	`TRUiSize · TRUiSize.md`	Sets the glyph and indicator size.
`disabled`	`bool · false`	Blocks interaction for this option, on top of the group value. Disabled options are skipped by the arrow keys.
`readOnly`	`bool · false`	Keeps the option focusable and its value visible while refusing changes.
`invalid`	`bool · false`	Paints the danger border. Drive it from your own validation; the widget never sets it.
`focusNode, autofocus`	`FocusNode? · null, bool · false`	An explicit `focusNode` replaces the one the group manages for this option.