Checkbox
Collect a binary or mixed selection with controlled, uncontrolled, and Flutter Form APIs.
Collect a binary or mixed selection with controlled, uncontrolled, and Flutter Form APIs.
Contract
| Axis | Contract |
|---|---|
| Selection | Unchecked, checked, or indeterminate for a partially selected set. |
| State ownership | Use defaultChecked for local state or checked with onCheckedChange for controlled state. |
| Availability | readOnly keeps focus and the form value; disabled blocks interaction and leaves TRFormValues. |
| Size | md or lg; the default is md. |
| Forms | TRCheckboxFormField supports validation, save, reset, restoration, and explicit checked or unchecked values. |
Give every checkbox a visible label or semanticLabel. Use TRCheckboxFormField when validation, saving, reset, or named TRFormValues are required.
Install
Add the package, then import its public library.
flutter pub add tinyrack_uiimport 'package:tinyrack_ui/tinyrack_ui.dart';Playground
Usage
import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';
class BackupChoice extends StatefulWidget {
const BackupChoice({super.key});
@override
State<BackupChoice> createState() => _BackupChoiceState();
}
class _BackupChoiceState extends State<BackupChoice> {
bool enabled = true;
@override
Widget build(BuildContext context) => Row(
mainAxisSize: MainAxisSize.min,
spacing: TRSpacing.small,
children: [
TRCheckbox(
checked: enabled,
semanticLabel: 'Enable backups',
onCheckedChange: (value) => setState(() => enabled = value),
),
const TRText('Enable backups', variant: TRTextVariant.bodySm),
],
);
}Examples
Unchecked, checked, and mixed permalink
Use indeterminate only when the checkbox summarizes a partially selected set.
Medium and large permalink
Match md or lg to the density of nearby controls.
Editable, read only, and disabled permalink
Read-only controls keep focus and form values; disabled controls do neither.
Required choice and recovery permalink
Use TRCheckboxFormField to validate an agreement and show the invalid control state.
Explicit on and off values permalink
Register a name and choose the value TRFormValues collects for each state.
API
Selection and interaction
| Prop | Type / default | Purpose |
|---|---|---|
checked, defaultChecked | bool?, bool = false | Control or initialize selection. |
indeterminate | bool = false | Show a partially selected set. Clear it when the choice is resolved. |
onCheckedChange | ValueChanged<bool>? | Report an attempted selection change. |
disabled, readOnly | bool = false | Remove interaction or keep a focusable immutable value. |
uiSize, semanticLabel | TRUiSize, String? | Set the control size and accessible name. |
Form field
| Prop | Type / default | Purpose |
|---|---|---|
initialValue, name | bool = false, String? | Initialize the field and register a named TRFormValues entry. |
checkedValue, uncheckedValue | Object? = true, false | Choose the values collected for checked and unchecked states. |
validator, onSaved, onReset | FormField callbacks | Participate in Flutter validation, save, and reset lifecycles. |
autovalidateMode, restorationId | Flutter FormField options | Configure automatic validation and state restoration. |