diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index a6172c7ad0..62ee0fd3fa 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/src/components/autocomplete/AutoComplete.d.ts
@@ -22,7 +22,7 @@ interface AutoCompleteProps {
     panelClassName?: string;
     panelStyle?: object;
     placeholder?: string;
-    readonly?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     maxlength?: number;
     size?: number;
diff --git a/src/components/autocomplete/AutoComplete.js b/src/components/autocomplete/AutoComplete.js
index 3d12dc6952..0b523c05df 100644
--- a/src/components/autocomplete/AutoComplete.js
+++ b/src/components/autocomplete/AutoComplete.js
@@ -35,7 +35,7 @@ export class AutoComplete extends Component {
         panelClassName: null,
         panelStyle: null,
         placeholder: null,
-        readonly: false,
+        readOnly: false,
         disabled: false,
         maxlength: null,
         size: null,
@@ -84,7 +84,7 @@ export class AutoComplete extends Component {
         panelClassName: PropTypes.string,
         panelStyle: PropTypes.object,
         placeholder: PropTypes.string,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         disabled: PropTypes.bool,
         maxlength: PropTypes.number,
         size: PropTypes.number,
@@ -614,7 +614,7 @@ export class AutoComplete extends Component {
             <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} id={this.props.inputId} type={this.props.type} name={this.props.name}
                         defaultValue={this.formatValue(this.props.value)} role="searchbox" aria-autocomplete="list" aria-controls={this.listId}
                         aria-labelledby={this.props.ariaLabelledBy} className={inputClassName} style={this.props.inputStyle} autoComplete="off"
-                        readOnly={this.props.readonly} disabled={this.props.disabled} placeholder={this.props.placeholder} size={this.props.size}
+                        readOnly={this.props.readOnly} disabled={this.props.disabled} placeholder={this.props.placeholder} size={this.props.size}
                         maxLength={this.props.maxlength} tabIndex={this.props.tabIndex}
                         onBlur={this.onInputBlur} onFocus={this.onInputFocus} onChange={this.onInputChange}
                         onMouseDown={this.props.onMouseDown} onKeyUp={this.props.onKeyUp} onKeyDown={this.onInputKeyDown}
diff --git a/src/components/colorpicker/ColorPicker.js b/src/components/colorpicker/ColorPicker.js
index 6de405e042..05f1ba4cdf 100644
--- a/src/components/colorpicker/ColorPicker.js
+++ b/src/components/colorpicker/ColorPicker.js
@@ -594,7 +594,7 @@ export class ColorPicker extends Component {
             let inputProps = ObjectUtils.findDiffKeys(this.props, ColorPicker.defaultProps);
 
             return (
-                <input ref={(el) => this.input = el} type="text" className={inputClassName} readOnly="readonly" id={this.props.inputId} tabIndex={this.props.tabIndex} disabled={this.props.disabled}
+                <input ref={(el) => this.input = el} type="text" className={inputClassName} readOnly id={this.props.inputId} tabIndex={this.props.tabIndex} disabled={this.props.disabled}
                     onClick={this.onInputClick} onKeyDown={this.onInputKeydown} {...inputProps}/>
             );
         }
diff --git a/src/components/inputmask/InputMask.d.ts b/src/components/inputmask/InputMask.d.ts
index 142f557f2d..2f3831446b 100644
--- a/src/components/inputmask/InputMask.d.ts
+++ b/src/components/inputmask/InputMask.d.ts
@@ -16,7 +16,7 @@ interface InputMaskProps {
     maxlength?: number;
     tabIndex?: number;
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     name?: string;
     required?: boolean;
     tooltip?: any;
diff --git a/src/components/inputmask/InputMask.js b/src/components/inputmask/InputMask.js
index 2f51678d00..4411d56d84 100644
--- a/src/components/inputmask/InputMask.js
+++ b/src/components/inputmask/InputMask.js
@@ -23,7 +23,7 @@ export class InputMask extends Component {
         maxlength: null,
         tabIndex: null,
         disabled: false,
-        readonly: false,
+        readOnly: false,
         name: null,
         required: false,
         tooltip: null,
@@ -50,7 +50,7 @@ export class InputMask extends Component {
         maxlength: PropTypes.number,
         tabIndex: PropTypes.number,
         disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         name: PropTypes.string,
         required: PropTypes.bool,
         tooltip: PropTypes.string,
@@ -227,7 +227,7 @@ export class InputMask extends Component {
     }
 
     onKeyDown(e) {
-        if (this.props.readonly) {
+        if (this.props.readOnly) {
             return;
         }
 
@@ -267,7 +267,7 @@ export class InputMask extends Component {
     }
 
     onKeyPress(e) {
-        if (this.props.readonly) {
+        if (this.props.readOnly) {
             return;
         }
 
@@ -391,7 +391,7 @@ export class InputMask extends Component {
     }
 
     onFocus(e) {
-        if (this.props.readonly) {
+        if (this.props.readOnly) {
             return;
         }
 
@@ -430,7 +430,7 @@ export class InputMask extends Component {
     }
 
     handleInputChange(e) {
-        if (this.props.readonly) {
+        if (this.props.readOnly) {
             return;
         }
 
@@ -605,7 +605,7 @@ export class InputMask extends Component {
         let inputMaskClassName = classNames('p-inputmask', this.props.className);
         return (
             <InputText id={this.props.id} ref={(el) => this.input = ReactDOM.findDOMNode(el)} type={this.props.type} name={this.props.name} style={this.props.style} className={inputMaskClassName} placeholder={this.props.placeholder}
-                size={this.props.size} maxLength={this.props.maxlength} tabIndex={this.props.tabIndex} disabled={this.props.disabled} readOnly={this.props.readonly}
+                size={this.props.size} maxLength={this.props.maxlength} tabIndex={this.props.tabIndex} disabled={this.props.disabled} readOnly={this.props.readOnly}
                 onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown} onKeyPress={this.onKeyPress}
                 onInput={this.onInput} onPaste={this.handleInputChange} required={this.props.required} aria-labelledby={this.props.ariaLabelledBy} />
         );
diff --git a/src/components/inputnumber/InputNumber.d.ts b/src/components/inputnumber/InputNumber.d.ts
index 93389a588e..a31b1e71c4 100644
--- a/src/components/inputnumber/InputNumber.d.ts
+++ b/src/components/inputnumber/InputNumber.d.ts
@@ -32,7 +32,7 @@ interface InputNumberProps {
     pattern?: string;
     inputMode?: string;
     placeholder?: string;
-    readonly?: boolean;
+    readOnly?: boolean;
     size?: number;
     style?: object;
     className?: string;
diff --git a/src/components/inputnumber/InputNumber.js b/src/components/inputnumber/InputNumber.js
index d13b3e1f96..c069af0e50 100644
--- a/src/components/inputnumber/InputNumber.js
+++ b/src/components/inputnumber/InputNumber.js
@@ -39,7 +39,7 @@ export class InputNumber extends Component {
         pattern: null,
         inputMode: null,
         placeholder: null,
-        readonly: false,
+        readOnly: false,
         size: null,
         style: null,
         className: null,
@@ -87,7 +87,7 @@ export class InputNumber extends Component {
         pattern: PropTypes.string,
         inputMode: PropTypes.string,
         placeholder: PropTypes.string,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         size: PropTypes.number,
         style: PropTypes.object,
         className: PropTypes.string,
@@ -942,7 +942,7 @@ export class InputNumber extends Component {
             <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} id={this.props.inputId} style={this.props.inputStyle} role="spinbutton"
                        className={className} defaultValue={valueToRender} type={this.props.type} size={this.props.size} tabIndex={this.props.tabIndex} inputMode={this.getInputMode()}
                        maxLength={this.props.maxlength} disabled={this.props.disabled} required={this.props.required} pattern={this.props.pattern}
-                       placeholder={this.props.placeholder} readOnly={this.props.readonly} name={this.props.name}
+                       placeholder={this.props.placeholder} readOnly={this.props.readOnly} name={this.props.name}
                        onKeyDown={this.onInputKeyDown} onKeyPress={this.onInputKeyPress} onInput={this.onInput} onClick={this.onInputClick}
                        onBlur={this.onInputBlur} onFocus={this.onInputFocus} onPaste={this.onPaste} min={this.props.min} max={this.props.max}
                        aria-valuemin={this.props.min} aria-valuemax={this.props.max} aria-valuenow={this.props.value} aria-labelledby={this.props.ariaLabelledBy} />
diff --git a/src/components/knob/Knob.d.ts b/src/components/knob/Knob.d.ts
index 7cb791f159..da498fa805 100644
--- a/src/components/knob/Knob.d.ts
+++ b/src/components/knob/Knob.d.ts
@@ -7,7 +7,7 @@ interface KnobProps {
     value?: any;
     size?: number;
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     showValue?: boolean;
     step?: number;
     min?: number;
diff --git a/src/components/knob/Knob.js b/src/components/knob/Knob.js
index e2c8d66202..73d980171b 100644
--- a/src/components/knob/Knob.js
+++ b/src/components/knob/Knob.js
@@ -12,7 +12,7 @@ export class Knob extends Component {
         value: null,
         size: 100,
         disabled: false,
-        readonly: false,
+        readOnly: false,
         showValue: true,
         step: 1,
         min: 0,
@@ -33,7 +33,7 @@ export class Knob extends Component {
         value: PropTypes.any,
         size: PropTypes.number,
         disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         showValue: PropTypes.bool,
         step: PropTypes.number,
         min: PropTypes.number,
@@ -101,13 +101,13 @@ export class Knob extends Component {
     }
 
     onClick(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             this.updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
         }
     }
 
     onMouseDown(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             this.windowMouseMoveListener = this.onMouseMove;
             this.windowMouseUpListener = this.onMouseUp;
             window.addEventListener('mousemove', this.windowMouseMoveListener);
@@ -117,7 +117,7 @@ export class Knob extends Component {
     }
 
     onMouseUp(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             window.removeEventListener('mousemove', this.windowMouseMoveListener);
             window.removeEventListener('mouseup', this.windowMouseUpListener);
             this.windowMouseMoveListener = null;
@@ -127,7 +127,7 @@ export class Knob extends Component {
     }
 
     onTouchStart(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             this.windowTouchMoveListener = this.onTouchMove;
             this.windowTouchEndListener = this.onTouchEnd;
             window.addEventListener('touchmove', this.windowTouchMoveListener, {passive: false, cancelable: false});
@@ -136,7 +136,7 @@ export class Knob extends Component {
     }
 
     onTouchEnd(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             window.removeEventListener('touchmove', this.windowTouchMoveListener);
             window.removeEventListener('touchend', this.windowTouchEndListener);
             this.windowTouchMoveListener = null;
@@ -145,14 +145,14 @@ export class Knob extends Component {
     }
 
     onMouseMove(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             this.updateValue(event.offsetX, event.offsetY);
             event.preventDefault();
         }
     }
 
     onTouchMove(event) {
-        if (!this.props.disabled && !this.props.readonly && event.touches.length === 1) {
+        if (!this.props.disabled && !this.props.readOnly && event.touches.length === 1) {
             const rect = this.element.getBoundingClientRect();
             const touch = event.targetTouches.item(0);
             const offsetX = touch.clientX - rect.left;
diff --git a/src/components/rating/Rating.d.ts b/src/components/rating/Rating.d.ts
index 75fff75b1d..8f33de6e41 100644
--- a/src/components/rating/Rating.d.ts
+++ b/src/components/rating/Rating.d.ts
@@ -5,7 +5,7 @@ interface RatingProps {
     id?: string;
     value?: number;
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     stars?: number;
     cancel?: boolean;
     style?: object;
diff --git a/src/components/rating/Rating.js b/src/components/rating/Rating.js
index 449099a239..9449e69658 100644
--- a/src/components/rating/Rating.js
+++ b/src/components/rating/Rating.js
@@ -9,7 +9,7 @@ export class Rating extends Component {
         id: null,
         value: null,
         disabled: false,
-        readonly: false,
+        readOnly: false,
         stars: 5,
         cancel: true,
         style: null,
@@ -23,7 +23,7 @@ export class Rating extends Component {
         id: PropTypes.string,
         value: PropTypes.number,
         disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         stars: PropTypes.number,
         cancel: PropTypes.bool,
         style: PropTypes.object,
@@ -41,7 +41,7 @@ export class Rating extends Component {
     }
 
     rate(event, i) {
-        if (!this.props.readonly && !this.props.disabled && this.props.onChange) {
+        if (!this.props.readOnly && !this.props.disabled && this.props.onChange) {
             this.props.onChange({
                 originalEvent: event,
                 value: i,
@@ -59,7 +59,7 @@ export class Rating extends Component {
     }
 
     clear(event) {
-        if (!this.props.readonly && !this.props.disabled && this.props.onChange) {
+        if (!this.props.readOnly && !this.props.disabled && this.props.onChange) {
             this.props.onChange({
                 originalEvent: event,
                 value: null,
@@ -97,7 +97,7 @@ export class Rating extends Component {
     }
 
     getFocusIndex() {
-        return (this.props.disabled || this.props.readonly) ? null : '0';
+        return (this.props.disabled || this.props.readOnly) ? null : '0';
     }
 
     componentDidMount() {
@@ -163,7 +163,7 @@ export class Rating extends Component {
     render() {
         let className = classNames('p-rating', {
             'p-disabled': this.props.disabled,
-            'p-rating-readonly': this.props.readonly
+            'p-rating-readonly': this.props.readOnly
         }, this.props.className);
         let cancelIcon = this.renderCancelIcon();
         let stars = this.renderStars();
diff --git a/src/components/steps/Steps.js b/src/components/steps/Steps.js
index 71584883f6..b179372485 100644
--- a/src/components/steps/Steps.js
+++ b/src/components/steps/Steps.js
@@ -92,7 +92,7 @@ export class Steps extends Component {
     }
 
     render() {
-        const className = classNames('p-steps p-component', this.props.className, {'p-readonly': this.props.readonly});
+        const className = classNames('p-steps p-component', this.props.className, {'p-readonly': this.props.readOnly});
         const items = this.renderItems();
 
         return (
diff --git a/src/showcase/autocomplete/AutoCompleteDoc.js b/src/showcase/autocomplete/AutoCompleteDoc.js
index 95cc5459c1..ca5e6c9d2f 100644
--- a/src/showcase/autocomplete/AutoCompleteDoc.js
+++ b/src/showcase/autocomplete/AutoCompleteDoc.js
@@ -460,7 +460,7 @@ itemTemplate(item) {
                                         <td>Hint text for the input field.</td>
                                     </tr>
                                     <tr>
-                                        <td>readonly</td>
+                                        <td>readOnly</td>
                                         <td>boolean</td>
                                         <td>false</td>
                                         <td>When present, it specifies that the input cannot be typed.</td>
diff --git a/src/showcase/datascroller/DataScrollerDemo.js b/src/showcase/datascroller/DataScrollerDemo.js
index 4ebd8fb772..3f7a489578 100644
--- a/src/showcase/datascroller/DataScrollerDemo.js
+++ b/src/showcase/datascroller/DataScrollerDemo.js
@@ -31,7 +31,7 @@ export class DataScrollerDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
diff --git a/src/showcase/datascroller/DataScrollerDoc.js b/src/showcase/datascroller/DataScrollerDoc.js
index 8a03546e9f..c1ea0863ca 100644
--- a/src/showcase/datascroller/DataScrollerDoc.js
+++ b/src/showcase/datascroller/DataScrollerDoc.js
@@ -44,7 +44,7 @@ export class DataScrollerDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -94,7 +94,7 @@ const DataScrollerDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -142,7 +142,7 @@ const DataScrollerDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
diff --git a/src/showcase/datascroller/DataScrollerInlineDemo.js b/src/showcase/datascroller/DataScrollerInlineDemo.js
index 8cff596f86..af0fb55bcd 100644
--- a/src/showcase/datascroller/DataScrollerInlineDemo.js
+++ b/src/showcase/datascroller/DataScrollerInlineDemo.js
@@ -32,7 +32,7 @@ export class DataScrollerInlineDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -106,7 +106,7 @@ export class DataScrollerInlineDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -155,7 +155,7 @@ const DataScrollerInlineDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -202,7 +202,7 @@ const DataScrollerInlineDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
diff --git a/src/showcase/datascroller/DataScrollerLoaderDemo.js b/src/showcase/datascroller/DataScrollerLoaderDemo.js
index b9ce98148f..9677d6881b 100644
--- a/src/showcase/datascroller/DataScrollerLoaderDemo.js
+++ b/src/showcase/datascroller/DataScrollerLoaderDemo.js
@@ -32,7 +32,7 @@ export class DataScrollerLoaderDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -109,7 +109,7 @@ export class DataScrollerLoaderDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -162,7 +162,7 @@ const DataScrollerLoaderDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -213,7 +213,7 @@ const DataScrollerLoaderDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
diff --git a/src/showcase/datatable/DataTableCrudDemo.js b/src/showcase/datatable/DataTableCrudDemo.js
index ab8bb9afdf..25d90ac9c0 100644
--- a/src/showcase/datatable/DataTableCrudDemo.js
+++ b/src/showcase/datatable/DataTableCrudDemo.js
@@ -244,7 +244,7 @@ export class DataTableCrudDemo extends Component {
     }
 
     ratingBodyTemplate(rowData) {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     statusBodyTemplate(rowData) {
@@ -643,7 +643,7 @@ export class DataTableCrudDemo extends Component {
     }
 
     ratingBodyTemplate(rowData) {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     statusBodyTemplate(rowData) {
@@ -981,7 +981,7 @@ const DataTableCrudDemo = () => {
     }
 
     const ratingBodyTemplate = (rowData) => {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     const statusBodyTemplate = (rowData) => {
@@ -1317,7 +1317,7 @@ const DataTableCrudDemo = () => {
     }
 
     const ratingBodyTemplate = (rowData) => {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     const statusBodyTemplate = (rowData) => {
diff --git a/src/showcase/datatable/DataTableDoc.js b/src/showcase/datatable/DataTableDoc.js
index 3ad897930d..365b166be5 100644
--- a/src/showcase/datatable/DataTableDoc.js
+++ b/src/showcase/datatable/DataTableDoc.js
@@ -1280,7 +1280,7 @@ export class DataTableTemplatingDemo extends Component {
     }
 
     ratingBodyTemplate(rowData) {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     statusBodyTemplate(rowData) {
@@ -2159,7 +2159,7 @@ export class DataTableRowExpansionDemo extends Component {
     }
 
     ratingBodyTemplate(rowData) {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     statusBodyTemplate(rowData) {
diff --git a/src/showcase/datatable/DataTableRowExpansionDemo.js b/src/showcase/datatable/DataTableRowExpansionDemo.js
index 3408e0e920..e18351122f 100644
--- a/src/showcase/datatable/DataTableRowExpansionDemo.js
+++ b/src/showcase/datatable/DataTableRowExpansionDemo.js
@@ -91,7 +91,7 @@ export class DataTableRowExpansionDemo extends Component {
     }
 
     ratingBodyTemplate(rowData) {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     statusBodyTemplate(rowData) {
@@ -254,7 +254,7 @@ export class DataTableRowExpansionDemo extends Component {
     }
 
     ratingBodyTemplate(rowData) {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     statusBodyTemplate(rowData) {
@@ -383,7 +383,7 @@ const DataTableRowExpansionDemo = () => {
     }
 
     const ratingBodyTemplate = (rowData) => {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     const statusBodyTemplate = (rowData) => {
@@ -510,7 +510,7 @@ const DataTableRowExpansionDemo = () => {
     }
 
     const ratingBodyTemplate = (rowData) => {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     const statusBodyTemplate = (rowData) => {
diff --git a/src/showcase/datatable/DataTableTemplatingDemo.js b/src/showcase/datatable/DataTableTemplatingDemo.js
index d3c565a46a..9779509c6a 100644
--- a/src/showcase/datatable/DataTableTemplatingDemo.js
+++ b/src/showcase/datatable/DataTableTemplatingDemo.js
@@ -42,7 +42,7 @@ export class DataTableTemplatingDemo extends Component {
     }
 
     ratingBodyTemplate(rowData) {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     statusBodyTemplate(rowData) {
@@ -136,7 +136,7 @@ export class DataTableTemplatingDemo extends Component {
     }
 
     ratingBodyTemplate(rowData) {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     statusBodyTemplate(rowData) {
@@ -202,7 +202,7 @@ const DataTableTemplatingDemo = () => {
     }
 
     const ratingBodyTemplate = (rowData) => {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     const statusBodyTemplate = (rowData) => {
@@ -266,7 +266,7 @@ const DataTableTemplatingDemo = () => {
     }
 
     const ratingBodyTemplate = (rowData) => {
-        return <Rating value={rowData.rating} readonly cancel={false} />;
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
     }
 
     const statusBodyTemplate = (rowData) => {
diff --git a/src/showcase/dataview/DataViewDemo.js b/src/showcase/dataview/DataViewDemo.js
index 75b4b39903..bc5feb5c16 100644
--- a/src/showcase/dataview/DataViewDemo.js
+++ b/src/showcase/dataview/DataViewDemo.js
@@ -61,7 +61,7 @@ export class DataViewDemo extends Component {
                     <div className="product-list-detail">
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                         <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                     </div>
                     <div className="product-list-action">
@@ -89,7 +89,7 @@ export class DataViewDemo extends Component {
                     <img src={`showcase/demo/images/product/${data.image}`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} />
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                     </div>
                     <div className="product-grid-item-bottom">
                         <span className="product-price">${data.price}</span>
diff --git a/src/showcase/dataview/DataViewDoc.js b/src/showcase/dataview/DataViewDoc.js
index 5684b53b7b..4bfa64eaf1 100644
--- a/src/showcase/dataview/DataViewDoc.js
+++ b/src/showcase/dataview/DataViewDoc.js
@@ -74,7 +74,7 @@ export class DataViewDemo extends Component {
                     <div className="product-list-detail">
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                         <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                     </div>
                     <div className="product-list-action">
@@ -102,7 +102,7 @@ export class DataViewDemo extends Component {
                     <img src={\`showcase/demo/images/product/\${data.image}\`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} />
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                     </div>
                     <div className="product-grid-item-bottom">
                         <span className="product-price">\${data.price}</span>
@@ -204,7 +204,7 @@ const DataViewDemo = () => {
                     <div className="product-list-detail">
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                         <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                     </div>
                     <div className="product-list-action">
@@ -232,7 +232,7 @@ const DataViewDemo = () => {
                     <img src={\`showcase/demo/images/product/\${data.image}\`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} />
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                     </div>
                     <div className="product-grid-item-bottom">
                         <span className="product-price">\${data.price}</span>
@@ -332,7 +332,7 @@ const DataViewDemo = () => {
                     <div className="product-list-detail">
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                         <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                     </div>
                     <div className="product-list-action">
@@ -360,7 +360,7 @@ const DataViewDemo = () => {
                     <img src={\`showcase/demo/images/product/\${data.image}\`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} />
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                     </div>
                     <div className="product-grid-item-bottom">
                         <span className="product-price">\${data.price}</span>
diff --git a/src/showcase/dataview/DataViewLazyDemo.js b/src/showcase/dataview/DataViewLazyDemo.js
index 9c6d676a8e..c807495305 100644
--- a/src/showcase/dataview/DataViewLazyDemo.js
+++ b/src/showcase/dataview/DataViewLazyDemo.js
@@ -65,7 +65,7 @@ export class DataViewLazyDemo extends Component {
                     <div className="product-list-detail">
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                         <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                     </div>
                     <div className="product-list-action">
@@ -93,7 +93,7 @@ export class DataViewLazyDemo extends Component {
                     <img src={`showcase/demo/images/product/${data.image}`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} />
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                     </div>
                     <div className="product-grid-item-bottom">
                         <span className="product-price">${data.price}</span>
@@ -235,7 +235,7 @@ export class DataViewLazyDemo extends Component {
                     <div className="product-list-detail">
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                         <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                     </div>
                     <div className="product-list-action">
@@ -263,7 +263,7 @@ export class DataViewLazyDemo extends Component {
                     <img src={\`showcase/demo/images/product/\${data.image}\`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} />
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                     </div>
                     <div className="product-grid-item-bottom">
                         <span className="product-price">\${data.price}</span>
@@ -384,7 +384,7 @@ const DataViewLazyDemo = () => {
                     <div className="product-list-detail">
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                         <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                     </div>
                     <div className="product-list-action">
@@ -412,7 +412,7 @@ const DataViewLazyDemo = () => {
                     <img src={\`showcase/demo/images/product/\${data.image}\`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} />
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                     </div>
                     <div className="product-grid-item-bottom">
                         <span className="product-price">\${data.price}</span>
@@ -524,7 +524,7 @@ const DataViewLazyDemo = () => {
                     <div className="product-list-detail">
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                         <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                     </div>
                     <div className="product-list-action">
@@ -552,7 +552,7 @@ const DataViewLazyDemo = () => {
                     <img src={\`showcase/demo/images/product/\${data.image}\`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} />
                         <div className="product-name">{data.name}</div>
                         <div className="product-description">{data.description}</div>
-                        <Rating value={data.rating} readonly cancel={false}></Rating>
+                        <Rating value={data.rating} readOnly cancel={false}></Rating>
                     </div>
                     <div className="product-grid-item-bottom">
                         <span className="product-price">\${data.price}</span>
diff --git a/src/showcase/inputmask/InputMaskDoc.js b/src/showcase/inputmask/InputMaskDoc.js
index 5f42373729..0800d708f8 100644
--- a/src/showcase/inputmask/InputMaskDoc.js
+++ b/src/showcase/inputmask/InputMaskDoc.js
@@ -347,7 +347,7 @@ import { InputMask } from 'primereact/inputmask';
                                         <td>When present, it specifies that the element value cannot be altered.</td>
                                     </tr>
                                     <tr>
-                                        <td>readonly</td>
+                                        <td>readOnly</td>
                                         <td>boolean</td>
                                         <td>false</td>
                                         <td>When present, it specifies that an input field is read-only.</td>
diff --git a/src/showcase/inputnumber/InputNumberDoc.js b/src/showcase/inputnumber/InputNumberDoc.js
index def07f1e64..33b94674a9 100644
--- a/src/showcase/inputnumber/InputNumberDoc.js
+++ b/src/showcase/inputnumber/InputNumberDoc.js
@@ -767,13 +767,7 @@ Vertical
                             <td>Hint text for the input field.</td>
                         </tr>
                         <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the input cannot be typed.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
+                            <td>readOnly</td>
                             <td>boolean</td>
                             <td>false</td>
                             <td>When present, it specifies that the element should be read-only.</td>
diff --git a/src/showcase/knob/KnobDemo.js b/src/showcase/knob/KnobDemo.js
index b6235f8ac5..bf6bfcf84e 100644
--- a/src/showcase/knob/KnobDemo.js
+++ b/src/showcase/knob/KnobDemo.js
@@ -39,7 +39,7 @@ export class KnobDemo extends Component {
                             </div>
                             <div className="p-field p-col-12 p-md-4">
                                 <h5>Readonly</h5>
-                                <Knob value={this.state.value2} readonly={true}/>
+                                <Knob value={this.state.value2} readOnly={true}/>
                             </div>
                             <div className="p-field p-col-12 p-md-4">
                                 <h5>Disabled</h5>
diff --git a/src/showcase/knob/KnobDoc.js b/src/showcase/knob/KnobDoc.js
index 506c499aff..ddfb314f28 100644
--- a/src/showcase/knob/KnobDoc.js
+++ b/src/showcase/knob/KnobDoc.js
@@ -42,7 +42,7 @@ export class KnobDemo extends Component {
                         </div>
                         <div className="p-field p-col-12 p-md-4">
                             <h5>Readonly</h5>
-                            <Knob value={this.state.value2} readonly={true}/>
+                            <Knob value={this.state.value2} readOnly={true}/>
                         </div>
                         <div className="p-field p-col-12 p-md-4">
                             <h5>Disabled</h5>
@@ -107,7 +107,7 @@ const KnobDemo = () => {
                     </div>
                     <div className="p-field p-col-12 p-md-4">
                         <h5>Readonly</h5>
-                        <Knob value={value2} readonly={true}/>
+                        <Knob value={value2} readOnly={true}/>
                     </div>
                     <div className="p-field p-col-12 p-md-4">
                         <h5>Disabled</h5>
@@ -171,7 +171,7 @@ const KnobDemo = () => {
                     </div>
                     <div className="p-field p-col-12 p-md-4">
                         <h5>Readonly</h5>
-                        <Knob value={value2} readonly={true}/>
+                        <Knob value={value2} readOnly={true}/>
                     </div>
                     <div className="p-field p-col-12 p-md-4">
                         <h5>Disabled</h5>
@@ -307,7 +307,7 @@ import { Knob } from 'primereact/knob';
                                     <td>When present, it specifies that the component should be disabled.</td>
                                 </tr>
                                 <tr>
-                                    <td>readonly</td>
+                                    <td>readOnly</td>
                                     <td>boolean</td>
                                     <td>false</td>
                                     <td>When present, it specifies that the component value cannot be edited.</td>
diff --git a/src/showcase/rating/RatingDemo.js b/src/showcase/rating/RatingDemo.js
index 5ecf6d049d..2f08971276 100644
--- a/src/showcase/rating/RatingDemo.js
+++ b/src/showcase/rating/RatingDemo.js
@@ -33,7 +33,7 @@ export class RatingDemo extends Component {
                         <Rating value={this.state.val2} cancel={false} onChange={(e) => this.setState({val2: e.value})} />
 
                         <h5>ReadOnly</h5>
-                        <Rating value={5} readonly stars={10} cancel={false} />
+                        <Rating value={5} readOnly stars={10} cancel={false} />
 
                         <h5>Disabled</h5>
                         <Rating value={8} disabled stars={10} />
diff --git a/src/showcase/rating/RatingDoc.js b/src/showcase/rating/RatingDoc.js
index 063f4c4b62..46e2aaed23 100644
--- a/src/showcase/rating/RatingDoc.js
+++ b/src/showcase/rating/RatingDoc.js
@@ -37,7 +37,7 @@ export class RatingDemo extends Component {
                     <Rating value={this.state.val2} cancel={false} onChange={(e) => this.setState({val2: e.value})} />
 
                     <h5>ReadOnly</h5>
-                    <Rating value={5} readonly stars={10} cancel={false} />
+                    <Rating value={5} readOnly stars={10} cancel={false} />
 
                     <h5>Disabled</h5>
                     <Rating value={8} disabled stars={10} />
@@ -68,7 +68,7 @@ const RatingDemo = () => {
                 <Rating value={val2} cancel={false} onChange={(e) => setVal2(e.value)} />
 
                 <h5>ReadOnly</h5>
-                <Rating value={5} readonly stars={10} cancel={false} />
+                <Rating value={5} readOnly stars={10} cancel={false} />
 
                 <h5>Disabled</h5>
                 <Rating value={8} disabled stars={10} />
@@ -98,7 +98,7 @@ const RatingDemo = () => {
                 <Rating value={val2} cancel={false} onChange={(e) => setVal2(e.value)} />
 
                 <h5>ReadOnly</h5>
-                <Rating value={5} readonly stars={10} cancel={false} />
+                <Rating value={5} readOnly stars={10} cancel={false} />
 
                 <h5>Disabled</h5>
                 <Rating value={8} disabled stars={10} />
@@ -185,7 +185,7 @@ import { Rating } from 'primereact/rating';
                                         <td>When present, it specifies that the element should be disabled.</td>
                                     </tr>
                                     <tr>
-                                        <td>readonly</td>
+                                        <td>readOnly</td>
                                         <td>boolean</td>
                                         <td>false</td>
                                         <td>When present, changing the value is not possible.</td>
diff --git a/src/showcase/steps/StepsDoc.js b/src/showcase/steps/StepsDoc.js
index abb72b53ec..d1cb2dccbc 100644
--- a/src/showcase/steps/StepsDoc.js
+++ b/src/showcase/steps/StepsDoc.js
@@ -219,7 +219,7 @@ const items = [
 </CodeHighlight>
 
                         <h5>interactive</h5>
-                        <p>Items are readonly by default, if you'd like to make them interactive then disable readonly, use command handlers of menuitem to respond to selection events and define activeIndex property along with the
+                        <p>Items are readOnly by default, if you'd like to make them interactive then disable readonly, use command handlers of menuitem to respond to selection events and define activeIndex property along with the
                             onSelect event to use it as a controlled component.</p>
 
 <CodeHighlight>