diff --git a/packages/html/src/autocomplete/README.md b/packages/html/src/autocomplete/README.md
new file mode 100644
index 00000000000..b051c628d81
--- /dev/null
+++ b/packages/html/src/autocomplete/README.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+
+
+
+ {valid && }
+ {invalid && }
+
+```
diff --git a/packages/html/src/autocomplete/autocomplete.jsx b/packages/html/src/autocomplete/autocomplete.jsx
new file mode 100644
index 00000000000..7d9de553aba
--- /dev/null
+++ b/packages/html/src/autocomplete/autocomplete.jsx
@@ -0,0 +1,155 @@
+import { globalDefaultProps } from '../component';
+import { Input, InputStatic, InputInnerInputStatic } from '../input/index';
+import { IconStatic } from '../icon/index';
+
+class Autocomplete extends Input {
+ render() {
+ return ;
+ }
+}
+
+function AutocompleteStatic(props) {
+
+ const {
+ className: ownClassName,
+
+ type,
+ value,
+ placeholder,
+ autocomplete,
+
+ showClearButton,
+
+ prefix,
+ suffix,
+
+ size,
+ rounded,
+
+ fillMode,
+
+ hover,
+ focus,
+ valid,
+ invalid,
+ required,
+ disabled,
+
+ aria,
+ legacy,
+
+ ...htmlAttributes
+ } = props;
+
+ htmlAttributes.size = size;
+ htmlAttributes.rounded = rounded;
+ htmlAttributes.fillMode = fillMode;
+ htmlAttributes.hover = hover;
+ htmlAttributes.focus = focus;
+ htmlAttributes.valid = valid;
+ htmlAttributes.invalid = invalid;
+ htmlAttributes.required = required;
+ htmlAttributes.disabled = disabled;
+
+ const inputAttributes = {
+ type,
+ value,
+ placeholder,
+ autocomplete,
+
+ disabled
+ };
+
+ let autocompleteClasses = [
+ ownClassName,
+ 'k-autocomplete'
+ ];
+
+ let ariaAttr = aria
+ ? {}
+ : {};
+
+ if (legacy) {
+
+ let legacyClasses = [
+ ownClassName,
+ 'k-widget',
+ 'k-autocomplete',
+ {
+ 'k-state-hover': hover === true,
+ 'k-state-focused': focus === true,
+ 'k-state-invalid': invalid === true,
+ 'k-state-required': required === true,
+ 'k-state-disabled': disabled === true
+ }
+ ];
+
+ return (
+
+ {prefix}
+
+ {!disabled && showClearButton && value !== '' && }
+ {suffix}
+
+ );
+ }
+
+ return (
+
+ {prefix}
+
+ {!disabled && showClearButton && value !== '' && }
+ {suffix}
+
+ );
+}
+
+AutocompleteStatic.defaultProps = {
+ ...globalDefaultProps,
+
+ type: 'text',
+ value: '',
+ placeholder: '',
+ autocomplete: 'off',
+
+ showClearButton: true,
+
+ size: 'medium',
+ rounded: 'medium',
+
+ fillMode: 'solid'
+};
+
+AutocompleteStatic.propTypes = {
+ children: typeof [],
+ className: typeof '',
+
+ type: typeof [ 'text', 'password' ],
+ value: typeof '',
+ placeholder: typeof '',
+ autocomplete: typeof [ 'on', 'off' ],
+
+ showClearButton: typeof true,
+
+ prefix: typeof '#fragment',
+ suffix: typeof '#fragment',
+
+ size: typeof [ 'none', 'small', 'medium', 'large' ],
+ rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+
+ fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+
+ hover: typeof false,
+ focus: typeof false,
+ valid: typeof false,
+ invalid: typeof false,
+ required: typeof false,
+ disabled: typeof false,
+
+ aria: typeof false,
+ legacy: typeof false,
+
+ htmlAttributes: typeof []
+};
+
+export { Autocomplete, AutocompleteStatic };
diff --git a/packages/html/src/autocomplete/index.js b/packages/html/src/autocomplete/index.js
new file mode 100644
index 00000000000..c48d2fdd6c3
--- /dev/null
+++ b/packages/html/src/autocomplete/index.js
@@ -0,0 +1 @@
+export * from './autocomplete.jsx';
diff --git a/packages/html/src/index.js b/packages/html/src/index.js
index 0595e82fa5c..8890de2b2ec 100644
--- a/packages/html/src/index.js
+++ b/packages/html/src/index.js
@@ -38,7 +38,7 @@ export * from './radio/index';
// export * from './slider/index';
// Augmented inputs
-// export * from './autocomplete/index';
+export * from './autocomplete/index';
// export * from './captcha/index';
// export * from './colorpicker/index';
// export * from './combobox/index';