What is KendoReact
Components
- Animation
- Barcodes
- Buttons
- Charts
- Common Utilitiesupdated
- Conversational UI
- Data Gridupdated
- Data Query
- Data Tools
- Date Inputs
- Date Math
- Dialogs
- Drawing
- Dropdowns
- Editor
- Excel Export
- File Saver
- Form
- Gantt
- Gauges
- Indicators
- Inputsupdated
- - Overview
  - Getting Started
  - Checkbox
  - ColorGradient
  - ColorPalette
  - ColorPicker
  - FlatColorPicker
  - Input
  - MaskedTextBoxupdated
  - NumericTextBoxupdated
  - RadioButton
  - RadioGroup
  - RangeSlider
  - Rating
  - Signature
  - Slider
  - Switch
  - TextArea
  - TextBox
  - Floating Labels
  - Custom attributes
  - Props Context
  - Globalization
  - API
- Labels
- Layoutupdated
- ListBox
- ListView
- Mapbeta
- Notification
- PDF Processing
- PDFViewernew
- PivotGrid
- Popup
- Progress Bars
- Ripple
- Scheduler
- ScrollView
- Sortable
- TaskBoard
- Tooltips
- TreeList
- TreeView
- Upload
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
Troubleshooting

Components / Inputs / API / NumericTextBoxProps /

NumericTextBoxProps

Represents the props of the KendoReact NumericTextBox component.

Name	Type	Default	Description
accessKey?	`string`		Specifies the `accessKey` of the NumericTextBox.
ariaDescribedBy?	`string`		Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.
ariaLabel?	`string`		The accessible label of the component.
ariaLabelledBy?	`string`		Identifies the element(s) which will label the component.
className?	`string`		Sets a class of the NumericTextBox DOM element.
defaultValue?	`"null" \| number`		Specifies the initial value. Leaves the subsequent updates uncontrolled.
dir?	`string`		Represents the `dir` HTML attribute.
disabled?	`boolean`		Determines whether the NumericTextBox is disabled.
fillMode?	`"null" \| "flat" \| "outline" \| "solid"`	`solid`	Configures the `fillMode` of the NumericTextBox. The available options are: solid outline flat null—Does not set a fillMode `className`.
format?	`string \| NumberFormatOptions`		Specifies the number format which is used for formatting the value (see example). If set to `an empty string` or `undefined`, the default format will be used. Format cannot contain decimal separators or numbers. Power signs are supported.
id?	`string`		Sets the `id` of the `input` DOM element.
inputStyle?	`React.CSSProperties`		Represents the input element `style` HTML attribute.
inputType?	`NumericTextBoxInputType`		Sets the `type` of the `input` DOM element. The available options are: (Default) `tel` `text`
label?	`string`		Renders a floating label for the NumericTextBox.
max?	`number`		Specifies the greatest value that can be entered.
min?	`number`		Specifies the smallest value that can be entered.
name?	`string`		Specifies the name of the `input` DOM element.
placeholder?	`string`		Specifies the input placeholder.
prefix?	`CustomComponent<any>`		Sets a custom prefix to the NumericTextBox component.
rangeOnEnter?	`boolean`		If enabled, the NumericTextBox will handle the `enter` key to range the current invalid value between `min` and `max` props. The available options are: (Default) `true` `false` Can be disabled when form submit is required on pressing the `enter` key.
readOnly?	`boolean`		Determines whether the NumericTextBox is in its read-only state.
required?	`boolean`		Specifies if `null` is a valid value for the component. This property is part of the FormComponentProps interface.
rounded?	`"null" \| "small" \| "medium" \| "full" \| "large"`	`medium`	Configures the `roundness` of the NumericTextBox. The available options are: small medium large full null—Does not set a rounded `className`.
size?	`"null" \| "small" \| "medium" \| "large"`	`medium`	Configures the `size` of the NumericTextBox. The available options are: small medium large null—Does not set a size `className`.
spinners?	`boolean`		Specifies whether the Up and Down spin buttons will be rendered (see example).
step?	`number`		Specifies the value that is used to increment or decrement the value of the NumericTextBox (see example).
style?	`React.CSSProperties`		Represents the `style` HTML attribute.
suffix?	`CustomComponent<any>`		Sets a custom suffix to the NumericTextBox component.
tabIndex?	`number`		Sets the `tabIndex` property of the NumericTextBox.
title?	`string`		Sets the title of the `input` element of the NumericTextBox.
valid?	`boolean`		Overrides the validity state of the component. If `valid` is set, the `required` property will be ignored. This property is part of the FormComponentProps interface.
validationMessage?	`string`		Controls the form error message of the component. If set to an empty string, no error will be thrown. This property is part of the FormComponentProps interface.
validityStyles?	`boolean`		If set to `false`, no visual representation of the invalid state of the component will be applied. This property is part of the FormComponentProps interface.
value?	`"null" \| number`		Specifies the value of the NumericTextBox.
width?	`string \| number`		Specifies the width of the NumericTextBox.

Methods

onBlur

The event handler that will be fired when NumericTextBox is blurred.

Parameters
event	`NumericTextBoxBlurEvent`

onChange

Determines the event handler that will be fired when the user edits the value.

Parameters
event	`NumericTextBoxChangeEvent`

onFocus

The event handler that will be fired when NumericTextBox is focused.

Parameters
event	`NumericTextBoxFocusEvent`

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

NumericTextBoxProps

In this article

Not finding the help you need?