---
product: "AG Grid"
title: "Checkbox Cell Editor"
description: "Simple boolean editor that uses the standard HTML checkbox input ."
framework: vue
version: "36.2.0"
related:
    - title: "Text Editor"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/provided-cell-editors-text/"
    - title: "Large Text Editor"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/provided-cell-editors-large-text/"
    - title: "Number Editor"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/provided-cell-editors-number/"
    - title: "Date Editors"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/provided-cell-editors-date/"
    - title: "Select Editor"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/provided-cell-editors-select/"
    - title: "Rich Select Editor"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/provided-cell-editors-rich-select/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Checkbox Cell Editor

Simple boolean editor that uses the standard HTML checkbox `input`.

## Enabling Checkbox Cell Editor

Edit any cell in the grid below to see the Checkbox Cell Editor. Note that by default the Checkbox Cell Renderer is shown, and the editor is only displayed when you start editing (e.g. double click within the cell).

#### Checkbox Editor

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CheckboxEditorModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CheckboxEditorModule,
]);

const data = Array.from(Array(20).keys()).map((val: any, index: number) => ({
  boolean: !!(index % 2),
}));

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Checkbox Cell Editor",
        field: "boolean",
        cellEditor: "agCheckboxCellEditor",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 200,
      editable: true,
    });
    const rowData = ref<any[] | null>(data);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Checkbox Editor](https://www.ag-grid.com/archive/36.2.0/examples/provided-cell-editors-checkbox/checkbox-editor/vue3/)

Enabled with `agCheckboxCellEditor` and generally used in conjunction with the [Checkbox Cell Component](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/cell-data-types/#enable-cell-data-types).

```js
columnDefs: [
    {
        cellRenderer: 'agCheckboxCellRenderer',
        cellEditor: 'agCheckboxCellEditor',
        // ...other props
    }
]
```