A selectable checkbox component for toggling options on and off.

Interactive preview

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,
    );
  }
 
  RemixCheckboxStyler get style {
    return RemixCheckboxStyler()
        .size(24, 24)
        .icon(.size(20).color(Colors.white))
        .onSelected(.color(Colors.grey.shade900))
        .borderRadius(.circular(3))
        .border(
          .color(Colors.black87)
          .width(2),
        );
  }
}

Fortal widgets

Remix includes a generated Fortal-themed widget 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: [
        FortalCheckbox.surface(
          selected: _isChecked,
          onChanged: (value) => setState(() => _isChecked = value ?? false),
        ),
        FortalCheckbox.soft(
          selected: _isChecked,
          onChanged: (value) => setState(() => _isChecked = value ?? false),
        ),
      ],
    );
  }
}

Constructor

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

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 → RemixCheckboxStyler

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

container(BoxStyler value)

Sets the checkbox container style.

indicator(IconStyler value)

Sets the checkbox indicator style.

shape(ShapeBorderMix value)

Sets the checkbox shape.

size(double width, double height)

Sets checkbox size by constraining the container.

borderRadius(BorderRadiusGeometryMix radius)

Sets checkbox border radius on the container.

border(BoxBorderMix value)

Sets checkbox border on the container.

indicatorColor(Color value)

Sets indicator color.

fillColor(Color value)

Sets checkbox fill color on the container.

alignment(Alignment value)

Sets container alignment.

onIndeterminate(RemixCheckboxStyler value)

Style applied when the checkbox is in the indeterminate state.

onSelected(RemixCheckboxStyler value)

Style applied when the checkbox is selected.

icon(IconStyler value)

Configures the icon style using an IconStyler.

padding(EdgeInsetsGeometryMix value)

Sets container padding.

animate(AnimationConfig value)

Sets animation configuration.

variants(List<VariantStyle<RemixCheckboxSpec>> value)

Sets style variants.

wrap(WidgetModifierConfig value)

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

modifier(WidgetModifierConfig value)

Sets the widget modifier.

call({ ... })

Creates a RemixCheckbox widget with this style applied.

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, {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