Checkbox

A boolean checkbox: [x] checked, [ ] unchecked. Enter or Space toggles it when focused, as does a click, calling onChanged with the new value. A controlled widget — hold the value yourself and update it from onChanged. Passing null disables it.

See also: Toggle for a compact on/off switch · Switch for a setting that should stand out.

Learn more: Forms & validation

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Checkbox(
  value: _accepted,
  label: 'Accept terms',
  onChanged: (value) => setState(() => _accepted = value),
)

Constructors

Checkbox()

Parameter	Type	Default	Description
value:	bool	required	Controlled checked state rendered by the checkbox.
onChanged:	void Function(bool value)?	required	Called with the requested next state on activation; null disables it.
label:	String?	—	Optional visible text and semantic label beside the indicator.
focusNode:	FocusNode?	—	Optional externally owned focus node used for activation.
autofocus:	bool	false	Whether the checkbox requests focus when mounted.
style:	CellStyle?	—	Base styling, plus optional hover, focus, selected, disabled, and invalid state entries from CellStyle.interactive.

Source

Checkbox is defined in packages/fleury/lib/src/catalog/controls.dart.

Category: Inputs & controls · All widgets

Live demo

checkbox_example.dart

Restart Run Expand

Example · editable Revert Format

class _CheckboxExampleState extends State<_CheckboxExample> {
  bool _accepted = false;

  @override
  Widget build(BuildContext context) => Checkbox(
    value: _accepted,
    label: 'Accept terms',
    autofocus: true,
    onChanged: (value) => setState(() => _accepted = value),
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand