Devextreme Checkbox

DevExtreme CheckBox Skill

A skill for building and configuring the DevExtreme CheckBox UI component (dxCheckBox) across Angular, React, Vue, and jQuery.

When to Use This Skill

• Creating a boolean toggle input
• Setting an initial checked/unchecked/indeterminate state
• Enabling three-state behavior (checked / unchecked / indeterminate)
• Handling value change events
• Adding a label or tooltip

Before You Start

> ⚠️ Always use the DevExtreme CheckBox (dxCheckBox / DxCheckBox). Never use a plain HTML ``, Material UI Checkbox, Ant Design Checkbox, or any other library.

Before writing any code, ask: Which framework are you using? Angular, React, Vue, or jQuery?

Key API

| Option | Type | Default | Description | |---|---|---|---| | value | Boolean \| null \| undefined | false | true = checked, false = unchecked, null/undefined = indeterminate | | text | String | '' | Label displayed next to the checkbox | | enableThreeStateBehavior | Boolean | false | Lets users cycle through checked → unchecked → indeterminate | | onValueChanged | function(e) | null | Fires when the value changes; e.value is the new value | | disabled | Boolean | false | Disables the component | | readOnly | Boolean | false | Prevents user interaction | | iconSize | Number \| String | undefined | Custom width and height of the checkbox icon | | hint | String | undefined | Tooltip shown on hover |

Event: valueChanged — use onValueChanged as the handler.

Getting Started

jQuery

$(function() {
    $('#check-box').dxCheckBox({
        value: false,
        text: 'Agree to terms',
        onValueChanged(e) {
            console.log(e.value);
        }
    });
});

Angular

// app.ts
import { Component } from '@angular/core';
import { DxCheckBoxComponent, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxCheckBoxComponent],
    templateUrl: './app.html'
})
export class AppComponent {
    onValueChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
        console.log(e.value);
    }
}

Vue

    

import DxCheckBox, { DxCheckBoxTypes } from 'devextreme-vue/check-box';

function onValueChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
    console.log(e.value);
}

React

import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { CheckBox, type CheckBoxTypes } from 'devextreme-react/check-box';

function onValueChanged(e: CheckBoxTypes.ValueChangedEvent) {
    console.log(e.value);
}

function App() {
    return (
        // defaultValue = uncontrolled (no state needed); use value + useState for two-way binding
        
    );
}

export default App;

Common Patterns

Three-state checkbox (indeterminate state)

{/* React */}

Two-way binding (React with state)

import { useState, useCallback } from 'react';
import { CheckBox } from 'devextreme-react/check-box';

function App() {
    const [checked, setChecked] = useState(false);
    const handleValueChanged = useCallback((e) => setChecked(e.value), []);

    return (
        
    );
}

Custom icon size and hint

Constraints & Rules

1. Framework first: Always ask which framework before writing code.
2. No fabricated API: Never guess option names. Use the DxDocs MCP to verify if unsure.
3. Version consistency: All DevExtreme packages must use the same version.
4. Framework conventions: Angular uses DxCheckBoxComponent; React imports from devextreme-react/check-box; Vue imports from devextreme-vue/check-box; jQuery uses $(...).dxCheckBox({}).
5. TypeScript by default: For Angular, React (TSX), and Vue, generate TypeScript unless explicitly asked otherwise.
6. React — no inline objects or functions in JSX: Define event handlers with useCallback. Never pass () => {} literals directly as JSX props.
7. Angular — standalone imports: Import DxCheckBoxComponent from devextreme-angular/ui/check-box into the component's imports array. Do not use DxCheckBoxModule or NgModule — Angular 20+ is fully standalone.
8. jQuery — always output both HTML and JS: Every jQuery snippet must include the container element (e.g. ``) alongside the JavaScript initializer.
9. Angular — prefer two-way value binding: Use [(value)]="property" instead of [value]="property" + a separate (onValueChanged) handler when the only goal is syncing the value.
10. React — CheckBoxTypes import: Use the aggregated types namespace from the React package: import { CheckBox, type CheckBoxTypes } from 'devextreme-react/check-box'. Type handlers as CheckBoxTypes.ValueChangedEvent. Do not import individual event types from 'devextreme/ui/check_box' or any other path.
11. React — defaultValue vs value: Use defaultValue for uncontrolled usage (no useState needed; component manages its own state). Use value only when you maintain state externally with useState and keep it in sync via onValueChanged. Never pass a literal like value={false} without a corresponding state update — the component will appear frozen.

Using the DxDocs MCP

• Search: mcp_dxdocs_devexpress_docs_search({ technology: "{Framework}", query: "..." })
• Fetch: mcp_dxdocs_devexpress_docs_get_content({ url: "..." })

Use for: accessibility options, state CSS customization, and any option not listed above.

Official Resources

• CheckBox demos
• dxCheckBox API reference
• Getting Started with CheckBox

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: DevExpress
• Source: DevExpress/agent-skills
• License: MIT
• Homepage: https://www.devexpress.com

Install and usage instructions live in the source repository linked above.