-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Box
- Responsive Box
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
-
Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
- Overview
-
Action Sheet
-
Button
- Floating Action Button
- Drop Down Button
-
Context Menu
-
List
-
Lookup
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
React Number Box - Overview
The NumberBox is a component that displays a number. Users can change this number (for example, type a new value or use the spin buttons, keyboard arrows, or mouse wheel to increment/decrement it).
Use the value property to specify the number displayed in the NumberBox. If you do not specify the value property, the NumberBox displays 0 (the default value). You can use the min and max properties to set the value range.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import { NumberBox, NumberBoxTypes } from 'devextreme-react/number-box';
const simpleLabel = { 'aria-label': 'Simple' };
const withSpinAndButtonsLabel = { 'aria-label': 'With Spin And Buttons' };
const disabledLabel = { 'aria-label': 'Disabled' };
const maxAndMinLabel = { 'aria-label': 'Min And Max' };
const salesLabel = { 'aria-label': 'Sales' };
const stockLabel = { 'aria-label': 'Stock' };
const keyDown = (e: NumberBoxTypes.KeyDownEvent) => {
const { event } = e;
const str = event.key;
if (/^[.,e]$/.test(str)) {
event.preventDefault();
}
};
function App() {
const [value, setValue] = useState(16);
const [max] = useState(30);
const valueChanged = useCallback((e: NumberBoxTypes.ValueChangedEvent) => {
setValue(e.value);
}, []);
return (
<div className="form">
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Default mode</div>
<div className="dx-field-value">
<NumberBox inputAttr={simpleLabel} />
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">With spin and clear buttons</div>
<div className="dx-field-value">
<NumberBox
defaultValue={20.5}
showSpinButtons={true}
showClearButton={true}
inputAttr={withSpinAndButtonsLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Disabled</div>
<div className="dx-field-value">
<NumberBox
defaultValue={20.5}
showSpinButtons={true}
showClearButton={true}
disabled={true}
inputAttr={disabledLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">With max and min values</div>
<div className="dx-field-value">
<NumberBox
defaultValue={15}
min={10}
max={20}
showSpinButtons={true}
inputAttr={maxAndMinLabel}
/>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-fieldset-header">Event Handling</div>
<div className="dx-field">
<div className="dx-field-label">This month sales</div>
<div className="dx-field-value">
<NumberBox
value={value}
max={max}
min={0}
showSpinButtons={true}
onKeyDown={keyDown}
onValueChanged={valueChanged}
inputAttr={salesLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Stock</div>
<div className="dx-field-value">
<NumberBox
min={0}
showSpinButtons={false}
readOnly={true}
value={max - value}
inputAttr={stockLabel}
/>
</div>
</div>
</div>
</div>
);
}
export default App;
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
Specify the onValueChanged function to handle the value change. In this demo, the value of the "Stock" NumberBox depends on the "This month sales" NumberBox. Change the value in the "This month sales" NumberBox to see how it affects the other value.
If users should not interact with a NumberBox, set its disabled or readOnly property to true. The main difference between these properties is that users can submit a read-only NumberBox in an HTML form, while they cannot submit a disabled NumberBox.