Checkbox

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

A selectable checkbox component for toggling options on and off.

When to use this

Multi-select lists: Allow users to select multiple items from a list
Form inputs: Collect boolean preferences or agreement confirmations
Settings panels: Enable/disable features or options
Bulk actions: Select multiple items for batch operations

Basic implementation

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

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

  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  bool _isChecked = true;

  @override
  Widget build(BuildContext context) {
    return RemixCheckbox(
      selected: _isChecked,
      onChanged: (value) {
        setState(() {
          _isChecked = value ?? false;
        });
      },
      label: 'Receive updates',
      style: style,
    );
  }

  CheckboxStyler get style {
    return CheckboxStyler()
        .size(24, 24)
        .icon(IconStyler().size(20).color(Colors.white))
        .onSelected(CheckboxStyler().fillColor(Colors.grey.shade900))
        .borderRadius(.all(const Radius.circular(3)))
        .border(
          BoxBorderMix.all(
            BorderSideMix().color(Colors.black87).width(2),
          ),
        );
  }
}

Fortal widgets

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

Fortal variants

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

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

  @override
  State<FortalCheckboxExample> createState() => _FortalCheckboxExampleState();
}

class _FortalCheckboxExampleState extends State<FortalCheckboxExample> {
  bool _isChecked = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        FortalCheckbox.surface(
          selected: _isChecked,
          label: 'Surface checkbox',
          onChanged: (value) => setState(() => _isChecked = value ?? false),
        ),
        FortalCheckbox.soft(
          selected: _isChecked,
          label: 'Soft checkbox',
          onChanged: (value) => setState(() => _isChecked = value ?? false),
        ),
      ],
    );
  }
}

See the fortalCheckboxStyle source code for all available options.

Constructor

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

RemixCheckbox remixCheckboxConstructor({
  Key? key,
  required bool? selected,
  ValueChanged<bool?>? onChanged,
  bool enabled = true,
  bool tristate = false,
  IconData? checkedIcon,
  IconData? uncheckedIcon,
  IconData? indeterminateIcon,
  FocusNode? focusNode,
  bool autofocus = false,
  bool enableFeedback = true,
  String? label,
  String? semanticLabel,
  Size minimumTapTargetSize = const Size.square(48),
  MouseCursor mouseCursor = SystemMouseCursors.click,
  CheckboxStyler style = const CheckboxStyler.create(),
  CheckboxSpec? styleSpec,
}) => throw UnimplementedError();

Properties

`key` → `Key?`

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

`enabled` → `bool`

Optional. Whether the checkbox is enabled for interaction.

`selected` → `bool?`

Required. Whether the checkbox is currently selected. When [tristate] is true, can be null for indeterminate state.

`tristate` → `bool`

Optional. Whether the checkbox can be true, false, or null (indeterminate).

`onChanged` → `ValueChanged<bool?>?`

Optional. Called when the user toggles the checkbox. When tristate is true, the value can be null.

`autofocus` → `bool`

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

`checkedIcon` → `IconData?`

Optional. The icon to display when the checkbox is checked. When null, the checkbox draws its built-in check glyph.

`uncheckedIcon` → `IconData?`

Optional. The icon to display when the checkbox is unchecked.

`indeterminateIcon` → `IconData?`

Optional. The icon to display when the checkbox is in indeterminate state. When null, the checkbox draws its built-in horizontal bar glyph.

`enableFeedback` → `bool`

Optional. Whether to provide haptic feedback when the checkbox is toggled. Defaults to true.

`label` → `String?`

Optional. A visible label included in the same pointer, focus, and semantics target as the checkbox. It becomes the accessible name unless semanticLabel overrides it.

`style` → `CheckboxStyler`

Optional. The style configuration for the checkbox.

`styleSpec` → `CheckboxSpec?`

Optional. The style spec for the checkbox.

`focusNode` → `FocusNode?`

Optional. The focus node for the checkbox.

`semanticLabel` → `String?`

Optional. Overrides the accessible name derived from label. Use it for icon-only checkboxes or when assistive technology needs more context than the visible label.

`minimumTapTargetSize` → `Size`

Optional. Minimum pointer, focus, and semantics target size. Defaults to Size.square(48) to satisfy common Android and iOS target-size guidance. Size.zero is an explicit compact opt-out for compositions that provide their own accessible target.