| Name | Type | Default |
|---|
|
allowNull
# |
boolean
|
true
|
Determines whether the widget's value could be null.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} allowNull={false} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
autoHidePromptChar
# |
boolean
|
true
|
Determines whether the the prompt char is visible only when the component is on focus.
import { createRoot } from "react-dom/client";
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} autoHidePromptChar={false} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
decimal
# |
number | string
|
0
|
Sets or gets the input's number.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} decimal={2} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
disabled
# |
boolean
|
false
|
Determines whether jqxNumberInput is disabled.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} disabled={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
decimalDigits
# |
number | string
|
2
|
Indicates the number of decimal places to use in numeric values.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} decimalDigits={3} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
decimalSeparator
# |
number | string
|
'.'
|
Sets or gets the char to use as the decimal separator in numeric values.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} decimalSeparator={','} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
digits
# |
number | string
|
8
|
Sets or gets the digits in the input
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} digits={8} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
groupSeparator
# |
string
|
','
|
Sets or gets the string that separates groups of digits to the left of the decimal in numeric values.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} groupSeparator={'.'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
groupSize
# |
number | string
|
3
|
Sets or gets the number of digits in each group to the left of the decimal in numeric values.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} groupSize={2} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
height
# |
string | number
|
null
|
Sets or gets the height of the input in pixels.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} height={25} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
inputMode
# |
NumberInputMode
|
'advanced'
|
NumberInputMode: "advanced" | "simple"
Sets or gets the input's mode.
Possible Values:
'advanced'- the number input behavior resembles a masked input with numeric mask
'simple'-the widget works as a normal textbox, but restricts the user's input to numbers
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} inputMode={'simple'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
min
# |
number | string
|
-99999999
|
Sets or gets the input's minimum value.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} min={2} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
max
# |
number | string
|
99999999
|
Sets or gets the input's maximum value.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} max={50} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
negativeSymbol
# |
string
|
'-'
|
Sets or gets the string to use as negative symbol.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} negativeSymbol={'-'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
placeHolder
# |
number | string
|
""
|
Determines the widget's place holder displayed when the widget's value is null.
|
|
promptChar
# |
NumberInputPromptChar
|
-
|
NumberInputPromptChar: "_" | "?" | ";" | "#"
Sets or gets the prompt char displayed when an editable char is empty.
Possible Values:
'_'
'?'
';'
'#'
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} promptChar={'#'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
rtl
# |
boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} rtl={true} spinButtons={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
readOnly
# |
boolean
|
false
|
Sets or gets the readOnly state of the input.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} readOnly={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
spinMode
# |
NumberInputMode
|
'advanced'
|
NumberInputMode: "advanced" | "simple"
Sets or gets the spin mode.
Possible Values:
'advanced'- the value is increased depending on the caret's position
'simple'-pecifies that the spin behavior is disabled
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} spinButtons={true} spinMode={'simple'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
spinButtons
# |
boolean
|
false
|
Shows or hides the spin buttons.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} spinButtons={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
spinButtonsWidth
# |
number
|
18
|
Sets or gets the width of the spin buttons.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} spinButtons={true} spinButtonsWidth={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
spinButtonsStep
# |
number | string
|
1
|
Sets or gets the increase/decrease step.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} spinButtons={true} spinButtonsStep={10} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
symbol
# |
string
|
''
|
Sets or gets the string to use as currency or percentage symbol.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} symbol={'$'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
symbolPosition
# |
NumberInputSymbolPosition
|
'left'
|
NumberInputSymbolPosition: "left" | "right"
Sets or gets the position of the symbol in the input.
Possible Values:
'left'
'right'
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} symbol={'@'} symbolPosition={'right'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
textAlign
# |
NumberInputTextAlign
|
'right'
|
NumberInputTextAlign: "left" | "right" | "center"
Sets or gets the alignment.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} textAlign={'left'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
template
# |
NumberInputTemplate
|
'default'
|
NumberInputTemplate: "default" | "primary" | "success" | "warning" | "danger" | "info"
Determines the template as an alternative of the default styles.
Possible Values:
'default' - the default template. The style depends only on the "theme" property value.
'primary' - dark blue style for extra visual weight.
'success' - green style for successful or positive action.
'warning' - orange style which indicates caution.
'danger' - red style which indicates a dangerous or negative action.
'info' - blue button, not tied to a semantic action or use.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} spinButtons={true} template={'success'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
theme
# |
string
|
''
|
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} theme={'material'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
value
# |
number | string
|
null
|
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} value={100} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
width
# |
string | number
|
null
|
Sets or gets the width of the input in pixels. Only positive values have effect.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
return <JqxNumberInput ref={myNumberInput} width={250} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
|
change
# |
Event
|
|
This event is triggered when the value is changed and the control's focus is lost.
Code examples #
Bind to the change event of jqxNumberInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
const onChange = (_e: Event): void => {
alert('do something...');
};
return <JqxNumberInput ref={myNumberInput} onChange={onChange} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
textchanged
# |
Event
|
|
This event is triggered when the user entered entered a text.
Code examples #
Bind to the textchanged event of jqxNumberInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
const onTextchanged = (_e: Event): void => {
alert('do something...');
};
return <JqxNumberInput ref={myNumberInput} onTextchanged={onTextchanged} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
valueChanged
# |
Event
|
|
This event is triggered after value is changed.
Code examples #
Bind to the valueChanged event of jqxNumberInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
const onValueChanged = (_e: Event): void => {
alert('do something...');
};
return <JqxNumberInput ref={myNumberInput} onValueChanged={onValueChanged} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
| Name | Arguments | Return Type |
|---|
|
clear
# |
None
|
|
Clears the value.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
useEffect(() => {
myNumberInput.current!.clear();
}, []);
return <JqxNumberInput ref={myNumberInput} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
destroy
# |
None
|
|
Destroys the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
useEffect(() => {
myNumberInput.current!.destroy();
}, []);
return <JqxNumberInput ref={myNumberInput} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
focus
# |
None
|
|
Focuses the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
useEffect(() => {
myNumberInput.current!.focus();
}, []);
return <JqxNumberInput ref={myNumberInput} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
getDecimal
# |
None
|
|
Gets the value.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
useEffect(() => {
myNumberInput.current!.getDecimal();
}, []);
return <JqxNumberInput ref={myNumberInput} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
setDecimal
# |
index
|
|
Sets the value.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
useEffect(() => {
myNumberInput.current!.setDecimal(200);
}, []);
return <JqxNumberInput ref={myNumberInput} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
val
# |
value
|
|
Sets or gets the value.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
function App() {
const myNumberInput = useRef<JqxNumberInput>(null);
useEffect(() => {
myNumberInput.current!.val();
}, []);
return <JqxNumberInput ref={myNumberInput} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
