NumberField

Accepts any kind of number. For just integers, use IntegerField. If an incorrect value is inputted, e.g. 1.5.0 or abc, the value is displayed, but onChange is not called and the field lights up red.

Editable

First variant is editable:

Live Editor

function EditableNumberField() {
	const [value, setValue] = useState(10.5);
	return (
		<NumberField
			name="test"
			label="Some label"
			value={value}
			editable
			onChange={setValue}
			className="test"
		/>
	);
}

Result

Loading...

Non Editable

Second variant is non editable:

Live Editor

function EditableNumberField() {
	const [value, setValue] = useState(10.5);
	return (
		<NumberField
			name="test"
			label="Some label"
			value={value}
			editable={false}
			onChange={setValue}
			className="test"
		/>
	);
}

Result

Loading...