Tinyrack

Fieldset

Group related form controls inside a bordered region.

Group related form controls inside a bordered region.

Contract

AxisContract
Legendlegend is a plain String drawn on the top border, not a widget slot. Leave it null for a bordered group with no caption.
Groupingchildren are stacked in a stretched Column with a medium gap, inside token-driven padding, border, and radius. The fieldset takes the width its parent gives it, so constrain that parent when a narrower group is needed.
Statedisabled dims the group with the disabled opacity token and marks it as disabled for Semantics. It does not disable the controls inside, so pass disabled to each control as well.
LabelingThe legend names the group, not the individual controls. Give each control its own visible label with TRField or a text widget beside it, and set semanticLabel on controls such as TRCheckbox.

Reach for TRFieldset when several controls answer one question together, such as choosing notification channels. A plain Column is enough when controls only share vertical space.

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

TRFieldset(
  legend: 'Notifications',
  children: [
    Row(
      mainAxisSize: MainAxisSize.min,
      spacing: TRSpacing.small,
      children: const [
        TRCheckbox(defaultChecked: true, semanticLabel: 'Email alerts'),
        TRText('Email alerts', variant: TRTextVariant.bodySm),
      ],
    ),
  ],
)

Examples

Notification channels permalink

Name the group with `legend`, then give every control its own visible label beside the checkbox and a matching `semanticLabel`.

Enabled and disabled groups permalink

`disabled` dims the group and marks it disabled for assistive technology, but it does not block the controls inside. Pass `disabled` to each control so the group cannot be edited.

Nested groups permalink

Nest a fieldset inside another one when a subset of options belongs to a narrower question. Each level keeps its own legend, so the relationship stays readable.

API

TRFieldset properties

PropType / defaultPurpose
childrenList<Widget> · requiredHolds the grouped controls. They are laid out in a stretched Column with a medium gap between entries.
legendString? · nullNames the group on the top border. The text measures against the current text scale, so the border keeps its gap when the reader enlarges text.
disabledbool · falseApplies the disabled opacity token and exposes the group as disabled through Semantics. Descendant controls keep their own enabled state.