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

Interactive preview

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

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