Checkbox

A Checkbox is a form control that allows users to select one or more options independently from a set.

Use Checkboxes when multiple selections are needed without impacting other choices, ideal for filters, settings, and multi-select forms.

Common alternative names:
Tick Box, Selection Box, Checkmark

---

Variants

Active

Checkbox in checked state.

Preview

Code

CheckTile(
  value: true,
  onChanged: (value) {
    // Handle state change
  },
)

---

Inactive

Checkbox in unchecked state.

Preview

Code

CheckTile(
  value: false,
  onChanged: (value) {
    // Handle state change
  },
)

---

Indeterminate

Checkbox in indeterminate state, typically used for parent checkboxes when some but not all children are selected.

Preview

Code

CheckTile(
  value: false,
  indeterminate: true,
  onChanged: (value) {
    // Handle state change
  },
)

---

Disabled

Checkbox that cannot be interacted with.

Preview

Code

CheckTile(
  value: false,
  readOnly: true,
)

---

Error State

Checkbox with error styling.

Preview

Code

CheckTile(
  value: false,
  isError: true,
  onChanged: (value) {
    // Handle state change
  },
)

---

With Label and Description

Checkbox with a label and optional description text.

Preview

Code

CheckTile(
  value: option1,
  label: 'Checkbox with Description',
  description: 'This is a description for the checkbox.',
  onChanged: (value) {
    // Update all children
  },
)

---

Interactive Example

A practical example showing parent-child checkbox relationships with indeterminate state.

Preview

Code

// Parent checkbox with indeterminate state
CheckTile(
  value: parentValue,
  indeterminate: isIndeterminate,
  onChanged: (value) {
    // Update all children
  },
  label: 'Select All',
),

// Child checkboxes
CheckTile(
  value: option1,
  label: 'Option 1',
  onChanged: (value) {
    // Update parent state
  },
),
CheckTile(
  value: option2,
  label: 'Option 2',
  onChanged: (value) {
    // Update parent state
  },
),
CheckTile(
  value: option3,
  label: 'Option 3',
  onChanged: (value) {
    // Update parent state
  },
),

---

Properties

Property	Type	Description
value	bool?	Required. Current state of the checkbox (true, false, or null for indeterminate).
onChanged	void Function(bool?)?	Callback when checkbox state changes. If null, checkbox is disabled.
label	String?	Text label displayed next to the checkbox. Makes the label clickable.
labelStyle	TextStyle?	Text style for the label. Default: AppFonts.regular14.
description	String?	Additional description text displayed below the label.
descriptionStyle	TextStyle?	Text style for the description. Default: AppFonts.regular12.
spacing	double	Spacing between checkbox and label/description column. Default: 12.
size	double	Size of the checkbox in logical pixels. Default: 15.
scale	double	Scale factor for the checkbox. Default: 1.
indeterminate	bool	Whether checkbox is in indeterminate state. Default: false.
isError	bool	Whether checkbox is in error state with error styling. Default: false.
readOnly	bool	Whether checkbox is read-only and cannot be interacted with. Default: false.
activeColor	Color?	Color when checkbox is checked or indeterminate. Uses theme colors if not provided.
borderColor	Color?	Color of the checkbox border. Uses theme colors if not provided.
borderRadius	BorderRadiusGeometry	Border radius of the checkbox. Default: BorderRadius.all(Radius.circular(4)).