React CheckBox - Getting Started
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
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:
The following code specifies the initial value as null
:
- // ...
- function App() {
- return (
- <CheckBox
- value={null}
- />
- );
- }
- 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.
- 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.