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

Interactive preview

Resolving preview metadata...

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal variants


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

See the FortalCheckboxStyle source code for all available options.

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

Prop	Type	Required / Default Value
`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

Method	Description
`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