Toggle · Tinyrack Design System

Press a two-state control that stays pressed until released.

Contract

Axis	Contract
State	Pass `pressed` to control the state, or leave it `null` and start from `defaultPressed`, which is `false`. `onPressedChange` reports the next value in both cases.
Availability	`disabled` blocks taps and keyboard activation and applies the disabled opacity token. The pressed appearance stays visible.
Label	`child` is required and provides the visible, accessible name. Keep it short enough to read at every size.
Size	`uiSize` accepts `md` and `lg`; the default is `md`. Each size sets height, inline padding, and text size from the shared control metrics.
Grouping	Inside a `TRToggleGroup`, a toggle with a `value` takes its pressed state from the group. `pressed` and `onPressedChange` are then ignored, and the group `disabled` adds to the item one.

A toggle is a button that stays pressed, not a form field: it exposes Semantics(button: true, toggled: pressed) and submits no value. Enter activates on key down and Space on key up, matching native buttons. Use TRCheckbox or TRSwitch when the value has to travel with a form.

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

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

  @override
  State<FormattingBar> createState() => _FormattingBarState();
}

class _FormattingBarState extends State<FormattingBar> {
  bool bold = false;

  @override
  Widget build(BuildContext context) {
    return TRToggle(
      pressed: bold,
      onPressedChange: (next) => setState(() => bold = next),
      child: const Text('Bold'),
    );
  }
}

Examples

Controlled formatting toggle permalink

Hold the state yourself with pressed and update it from onPressedChange when the toggle drives other UI.

Loading the Flutter preview

Enabled and disabled states permalink

Without pressed the toggle keeps its own state from defaultPressed. A disabled toggle keeps its pressed appearance but ignores taps, keyboard activation, and focus.

Loading the Flutter preview

Sizes permalink

uiSize sets height, inline padding, and text size together. Match the size to the controls beside the toggle.

Loading the Flutter preview

API

TRToggle properties

Prop	Type / default	Purpose
`child`	`Widget · required`	Renders the label. Text styling comes from `uiSize` and the theme, so an explicit `TextStyle` is unnecessary.
`pressed`	`bool? · null`	Controls the pressed state. While it is non-null the widget never changes state on its own.
`defaultPressed`	`bool · false`	Sets the initial state of an uncontrolled toggle. It is ignored once `pressed` is provided.
`onPressedChange`	`ValueChanged<bool>? · null`	Reports the next pressed value after a tap, Enter, or Space. There is no way to veto the change.
`disabled`	`bool · false`	Removes pointer and keyboard activation and marks the toggle as disabled for assistive technology.
`uiSize`	`TRUiSize · TRUiSize.md`	Selects the `md` or `lg` control metrics.
`value`	`String? · null`	Identifies the toggle inside a `TRToggleGroup`. Keep it stable and unique within the group.
`focusNode`	`FocusNode? · null`	Takes over focus handling. Without one the toggle creates and disposes its own node, or borrows the node its group manages.
`autofocus`	`bool · false`	Requests focus when the toggle first appears. Use it at most once per screen.