> For the complete documentation index, see [llms.txt](https://yashs-organization-7.gitbook.io/modular-ui-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yashs-organization-7.gitbook.io/modular-ui-documentation/checkbox.md).

# CheckBox

## CheckBox

## MUICheckBox

A customizable checkbox widget with optional text that can also trigger the checkbox state change.

### Properties

* **`checked`**: *bool* - The state of the checkbox; either checked or not.
* **`child`**: *Widget* - Typically a Text widget; the checkbox will also be checked if the child is tapped.
* **`onChanged`**: *Function(bool)?* - Callback for when either the checkbox or the child is pressed.
* **`fillColor`**: *Color* - The fill color of the checkbox shown when checked; default: Colors.black.
* **`iconColor`**: *Color* - The color of the check icon inside the checkbox; default: Colors.white.
* **`size`**: *double* - The size of the checkbox; default: 14.
* **`borderRadius`**: *double* - The border radius of the checkbox; default: 4.
* **`animationDuration`**: *int* - The duration between the checked and unchecked state in milliseconds; default: 100.

### Example Usage

{% embed url="<https://verdant-lokum-9bd5c2.netlify.app/#/checkbox>" %}
Checkbox
{% endembed %}

```dart
ValueNotifier<bool> checkedNotifier = ValueNotifier(true);

// inside build widget
ValueListenableBuilder(
          valueListenable: checkedNotifier,
          builder: (context, checked, child) => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MUICheckBox(
                checked: checkedNotifier.value,
                onChanged: (value) {
                  checkedNotifier.value = value;
                },
                child: const Text(
                  "Accept Terms and conditions",
                  style: TextStyle(fontWeight: FontWeight.w500),
                ),
              ),
            ],
          ),
        ),
```

### **Notes**

* Displays a checkbox with optional text that triggers the checkbox state change.
* Supports customization of checkbox size, colors, border radius, and animation duration.
* Changes state when either the checkbox or the child is pressed.
* Provides visual feedback on hover by changing the mouse cursor.