> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox

> A selection control that allows users to toggle between checked and unchecked states, with support for labeling.

## Examples

<Tabs>
  <Tab title="States">
    <Frame caption="Different checkbox states.">
      <img src="https://mintcdn.com/tvk/xOcwrKRVA4J0vbxn/images/widgets/inputs/checkbox/checkbox_states_light.png?fit=max&auto=format&n=xOcwrKRVA4J0vbxn&q=85&s=1397efb3f1ba939d4bf827e339ff8a1a" alt="Checkbox states example" noZoom className="block dark:hidden" width="1536" height="384" data-path="images/widgets/inputs/checkbox/checkbox_states_light.png" />

      <img src="https://mintcdn.com/tvk/xOcwrKRVA4J0vbxn/images/widgets/inputs/checkbox/checkbox_states_dark.png?fit=max&auto=format&n=xOcwrKRVA4J0vbxn&q=85&s=c9ea561830c3609204d95a32a47a2cfc" alt="Checkbox states example" noZoom className="hidden dark:block" width="1536" height="384" data-path="images/widgets/inputs/checkbox/checkbox_states_dark.png" />
    </Frame>

    <CodeGroup>
      ```dart Unchecked lines theme={null}
      NeoCheckbox(
        isChecked: false,
        onChanged: (value) {
          // Handle state change
        },
      ),
      ```

      ```dart Checked lines theme={null}
      NeoCheckbox(
        isChecked: true,
        onChanged: (value) {
          // Handle state change
        },
      ),
      ```

      ```dart Indeterminate lines theme={null}
      NeoCheckbox(
        isChecked: false,
        isIndeterminate: true,
        onChanged: (value) {
          // Handle state change
        },
      ),
      ```
    </CodeGroup>
  </Tab>

  <Tab title="With Labels">
    <Frame caption="Checkboxes with labels and descriptions.">
      <img src="https://mintcdn.com/tvk/xOcwrKRVA4J0vbxn/images/widgets/inputs/checkbox/checkbox_labels_light.png?fit=max&auto=format&n=xOcwrKRVA4J0vbxn&q=85&s=c1246ddd558952b1766e1e3743185c8e" alt="Checkbox with labels example" noZoom className="block dark:hidden" width="1536" height="384" data-path="images/widgets/inputs/checkbox/checkbox_labels_light.png" />

      <img src="https://mintcdn.com/tvk/xOcwrKRVA4J0vbxn/images/widgets/inputs/checkbox/checkbox_labels_dark.png?fit=max&auto=format&n=xOcwrKRVA4J0vbxn&q=85&s=7287800f2a679e9110ebdc8020302569" alt="Checkbox with labels example" noZoom className="hidden dark:block" width="1536" height="384" data-path="images/widgets/inputs/checkbox/checkbox_labels_dark.png" />
    </Frame>

    <CodeGroup>
      ```dart With Label lines theme={null}
      NeoCheckbox(
        isChecked: false,
        label: "I accept the terms and conditions",
        onChanged: (value) {
          // Handle state change
        },
      ),
      ```

      ```dart With Description lines theme={null}
      NeoCheckbox(
        isChecked: true,
        label: "Email notifications",
        description: "Receive updates about your account activity and important announcements",
        onChanged: (value) {
          // Handle state change
        },
      ),
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Properties

### Required

<ParamField path="isChecked" type="bool" required>
  The current checked state of the checkbox. `true` represents checked, `false` represents unchecked.
</ParamField>

<ParamField path="onChanged" type="ValueChanged<bool>" required>
  Callback function called when the checkbox state changes. Receives the new boolean value.
</ParamField>

### Content

<ParamField path="label" type="String">
  The text label displayed next to the checkbox.
</ParamField>

<ParamField path="description" type="String">
  Additional descriptive text displayed below the label. Useful for providing context or additional information about the option.
</ParamField>

### State

<ParamField path="isIndeterminate" type="bool" default="false">
  Whether the checkbox is in an indeterminate state. When true, displays a minus icon regardless of the `isChecked` value. Commonly used for "select all" checkboxes when only some items are selected.
</ParamField>

<ParamField path="enabled" type="bool" default="true">
  Whether the checkbox is interactive. When false, the checkbox appears with reduced opacity and doesn't respond to user interactions.
</ParamField>

## Best Practices

* Combine with [`NeoHaptics`](/utilities/haptics) in the `onChanged` callback for enhanced user experience on supported devices.

## Integration Notes

* When a `label` and/or `description` is provided, the entire area is clickable, not just the checkbox itself.
