React CheckBox - Getting Started
jQuery
Angular
Vue
React
This tutorial shows how to add the CheckBox to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-check-box.
Create a CheckBox
jQuery
Add DevExtreme to your jQuery application and use the following code to create a CheckBox component:
$(function() { $("#check-box").dxCheckBox({ }); });
<html> <head> <!-- ... --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.2.13/css/dx.light.css"> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/22.2.13/js/dx.all.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body> <div id="check-box"></div> </body> </html>
Angular
Add DevExtreme to your Angular application and use the following code to create a CheckBox component:
<dx-check-box></dx-check-box>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxCheckBoxModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxCheckBoxModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
Add DevExtreme to your Vue application and use the following code to create a CheckBox component:
<template> <DxCheckBox /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxCheckBox } from 'devextreme-vue/check-box'; export default { components: { DxCheckBox } } </script>
React
Add DevExtreme to your React application and use the following code to create a CheckBox component:
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { CheckBox } from 'devextreme-react/check-box'; function App() { return ( <CheckBox /> ); } export default App;
Specify the Initial Value
The CheckBox can be in one of the following states depending on its value:
You can turn on the enableThreeStateBehavior option to allow users to cycle through all three states.
The following code specifies the initial value as null
:
jQuery
$(function() { $("#check-box").dxCheckBox({ value: null, enableThreeStateBehavior: true }); });
Angular
<dx-check-box [value]="null" [enableThreeStateBehavior]="true" > </dx-check-box>
Vue
<template> <DxCheckBox :value="null" :enable-three-state-behavior="true" /> </template> <script> // ... </script>
React
// ... function App() { return ( <CheckBox value={null} enableThreeStateBehavior={true} /> ); } export default App;
Configure the CheckBox
To label the CheckBox and add a pop-up hint, specify the text and hint properties.
You can also use the iconSize property to specify a custom width and height for the CheckBox.
jQuery
$(function() { $("#check-box").dxCheckBox({ // ... text: 'Approve', hint: 'Approve', iconSize: 25 }); });
Angular
<dx-check-box ... text="Approve" hint="Approve" iconSize="25" > </dx-check-box>
Vue
<template> <DxCheckBox ... text="Approve" hint="Approve" icon-size="25" /> </template> <script> // ... </script>
React
// ... function App() { return ( <CheckBox text="Approve" hint="Approve" iconSize="25" /> ); } export default App;
Handle the Value Change
Implement the onValueChanged event handler to perform an action when users click the CheckBox.
The code below notifies a user every time the CheckBox is checked.
jQuery
$(function() { $("#check-box").dxCheckBox({ // ... onValueChanged: function(e) { if (e.value) { DevExpress.ui.notify("The CheckBox is checked", "success", 500); } } }); });
Angular
<dx-check-box ... (onValueChanged)="onValueChanged($event)" > </dx-check-box>
import { Component } from '@angular/core'; import notify from 'devextreme/ui/notify'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { onValueChanged(e) { if (e.value) { notify("The CheckBox is checked", "success", 500); } } }
Vue
<template> <DxCheckBox ... @value-changed="onValueChanged" /> </template> <script> // ... import notify from "devextreme/ui/notify"; export default { // ... methods: { onValueChanged(e) { if (e.value) { notify("The CheckBox is checked", "success", 500); } } } } </script>
React
import React, { useCallback } from 'react'; import notify from 'devextreme/ui/notify'; // ... function App() { const onValueChanged = useCallback((e) => { if (e.value) { notify("The CheckBox is checked", "success", 500); } }, []); return ( <CheckBox ... onValueChanged={onValueChanged} /> ); } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.