Skip to main content


The "Checkbox" widget allows users to select or deselect an option, commonly used in forms and settings. Here's an explanation of its features:

  • Value: This determines whether the checkbox is checked, unchecked, or indeterminate. Setting this controls the current state of the checkbox.

  • Tristate: When enabled, the checkbox supports three states: checked, unchecked, and indeterminate (neither checked nor unchecked), adding flexibility for complex scenarios.

  • On Changed: This function is called when the checkbox's value changes (when it's tapped). It's used to update the state and perform actions based on the new value.

  • Active Color: Sets the color of the checkbox when it's checked, allowing you to customize it to fit your app's design.

  • Check Color: Changes the color of the check mark inside the checkbox, providing contrast against the active color.

  • Focus Color: Determines the color of the checkbox's outline when it has focus, improving accessibility and visual cues.

  • Hover Color: Sets the color of the checkbox when a cursor hovers over it, useful for desktop platforms to indicate an interactive element.

  • Splash Radius: Adjusts the radius of the ink splash animation that appears when the checkbox is tapped, allowing for a more customized interaction effect.

  • Autofocus: When set to true, the checkbox will be focused automatically when the page loads, making navigation more intuitive.

  • Side: Allows customization of the border's appearance around the checkbox, giving more control over its style and visibility.

  • Is Error: Indicates whether the checkbox is in an error state, typically used to signal to users that their selection has caused an error in a form or setting.

  • Semantic Label: Provides a text description for the checkbox, improving accessibility by describing its purpose to users who rely on screen readers.