Checkbox

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;
        });
      },
      style: style,
    );
  }

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

Fortal styles

Remix includes Fortal-themed style helpers for this component:

import 'package:flutter/material.dart';
import 'package:remix/remix.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: [
        RemixCheckbox(
          selected: _isChecked,
          onChanged: (value) => setState(() => _isChecked = value ?? false),
          style: FortalCheckboxStyle.solid(),
        ),
        RemixCheckbox(
          selected: _isChecked,
          onChanged: (value) => setState(() => _isChecked = value ?? false),
          style: FortalCheckboxStyle.soft(),
        ),
      ],
    );
  }
}

Constructor

const RemixCheckbox({
  Key? key,
  bool enabled = true,
  required bool? selected,
  bool tristate = false,
  ValueChanged<bool?>? onChanged,
  bool autofocus = false,
  IconData checkedIcon = Icons.check_rounded,
  IconData? uncheckedIcon,
  IconData indeterminateIcon = Icons.horizontal_rule,
  bool enableFeedback = true,
  RemixCheckboxStyle style = const RemixCheckboxStyle.create(),
  RemixCheckboxSpec? styleSpec,
  FocusNode? focusNode,
  String? semanticLabel,
  MouseCursor mouseCursor = SystemMouseCursors.click,
})

Properties

Widget 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. Defaults to Icons.check_rounded.

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. Defaults to Icons.horizontal_rule.

enableFeedback → bool

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

style → RemixCheckboxStyle

Optional. The style configuration for the checkbox.

styleSpec → RemixCheckboxSpec?

Optional. The style spec for the checkbox.

focusNode → FocusNode?

Optional. The focus node for the checkbox.

semanticLabel → String?

Optional. The semantic label for the checkbox.

mouseCursor → MouseCursor

Optional. Cursor when hovering over the checkbox.

Style Methods

checkboxSize(double value)

Sets checkbox size by constraining the container.

checkboxBorderRadius(double radius)

Sets checkbox border radius on the container.

border(BoxBorderMix value)

Sets checkbox border on the container.

indicatorColor(Color value)

Sets indicator color.

alignment(Alignment value)

Sets container alignment.

onIndeterminate(RemixCheckboxStyle value)

Style applied when the checkbox is in the indeterminate state.

icon(IconStyler value)

Configures the icon style using an IconStyler.

padding(EdgeInsetsGeometryMix value)

Sets container padding.

color(Color value)

Sets checkbox background color on the container.

size(double width, double height)

Sets checkbox size with separate width and height.

borderRadius(BorderRadiusGeometryMix radius)

Sets border radius on the outer container.

animate(AnimationConfig animation)

Sets animation configuration.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

constraints(BoxConstraintsMix value)

Sets size constraints on the component.

decoration(DecorationMix value)

Sets the container decoration.

margin(EdgeInsetsGeometryMix value)

Sets the container margin.

foregroundDecoration(DecorationMix value)

Sets a foreground decoration painted on top of the component.

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)

Applies a matrix transformation to the component.

iconColor(Color value)

Sets icon color

iconSize(double value)

Sets icon size

iconOpacity(double value)

Sets icon opacity

iconWeight(double value)

Sets icon weight (useful for variable icons like Material Symbols)

iconGrade(double value)

Sets icon grade (useful for Material Icons)

iconFill(double value)

Sets icon fill (useful for Material Icons filled variants)

iconOpticalSize(double value)

Sets icon optical size (useful for Material Icons)

iconBlendMode(BlendMode value)

Sets icon blend mode

iconTextDirection(TextDirection value)

Sets icon text direction

iconShadows(List<ShadowMix> value)

Sets icon shadows

iconShadow(ShadowMix value)

Sets single icon shadow