diff --git a/clayui.com/content/docs/components/text-input-localizable.mdx b/clayui.com/content/docs/components/text-input-localizable.mdx
new file mode 100644
index 0000000000..09daae95a9
--- /dev/null
+++ b/clayui.com/content/docs/components/text-input-localizable.mdx
@@ -0,0 +1,35 @@
+---
+title: 'Localizable Input'
+description: 'A text input variation used in fields that can be translated into multiple languages.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/text-input-localizable/'
+packageNpm: '@clayui/localized-input'
+sibling: 'docs/components/forms/css-text-input-localizable.html'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Usages](#usages)
+    -   [Basic Usage](#basic-usage)
+    -   [Localizable URL](#localizable-url)
+-   [API](#api)
+
+</div>
+</div>
+
+import {
+	LocalizableInput,
+	LocalizableInputWithURL,
+} from '../../../src/components/clay/LocalizableInput';
+
+## Basic usage
+
+<LocalizableInput />
+
+## Localizable URL
+
+<LocalizableInputWithURL />
+
+## API
+
+<div>[APITable "clay-localized-input/src/index.tsx"]</div>
diff --git a/clayui.com/src/components/clay/LocalizableInput.js b/clayui.com/src/components/clay/LocalizableInput.js
new file mode 100644
index 0000000000..71b6fbcd9a
--- /dev/null
+++ b/clayui.com/src/components/clay/LocalizableInput.js
@@ -0,0 +1,131 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import ClayLocalizedInput from '@clayui/localized-input';
+import React, {useState} from 'react';
+
+import Editor from './Editor';
+
+const spritemap = '/images/icons/icons.svg';
+
+const localizableInputImports = `import ClayLocalizedInput from '@clayui/localized-input';
+import React from 'react';`;
+
+const localizableInputCode = `const Component = () => {
+    const locales = [
+		{
+			label: 'en-US',
+			symbol: 'en-us',
+		},
+		{
+			label: 'es-ES',
+			symbol: 'es-es',
+		},
+		{
+			label: 'fr-FR',
+			symbol: 'fr-fr',
+		},
+		{
+			label: 'hr-HR',
+			symbol: 'hr-hr',
+		},
+	];
+
+	const [selectedLocale, setSelectedLocale] = useState(locales[0]);
+	const [translations, setTranslations] = useState({
+		'en-US': 'Apple',
+		'es-ES': 'Manzana',
+    });
+    
+    return (
+        <ClayLocalizedInput
+            id="locale1"
+            locales={locales}
+            onSelectedLocaleChange={setSelectedLocale}
+            onTranslationsChange={setTranslations}
+            selectedLocale={selectedLocale}
+            translations={translations}
+        />
+    )
+};
+
+render(<Component />);`;
+
+export const LocalizableInput = () => {
+	const scope = {
+		ClayLocalizedInput,
+		spritemap,
+		useState,
+	};
+
+	return (
+		<Editor
+			code={localizableInputCode}
+			imports={localizableInputImports}
+			scope={scope}
+		/>
+	);
+};
+
+const localizableInputWithURLCode = `const Component = () => {
+    const locales = [
+		{
+			label: 'en-US',
+			symbol: 'en-us',
+		},
+		{
+			label: 'es-ES',
+			symbol: 'es-es',
+		},
+		{
+			label: 'fr-FR',
+			symbol: 'fr-fr',
+		},
+		{
+			label: 'hr-HR',
+			symbol: 'hr-hr',
+		},
+	];
+
+	const [selectedLocale, setSelectedLocale] = useState(locales[0]);
+	const [translations, setTranslations] = useState({
+		'en-US': 'Apple',
+		'es-ES': 'Manzana',
+    });
+
+	const prepend = '/home/';
+    
+    return (
+        <ClayLocalizedInput
+            id="locale2"
+            label="As a URL"
+            locales={locales}
+            onSelectedLocaleChange={setSelectedLocale}
+            onTranslationsChange={setTranslations}
+            prependContent={prepend}
+            resultFormatter={val => "https://liferay.com" + prepend + val}
+            selectedLocale={selectedLocale}
+            translations={translations}
+        />
+    )
+};
+
+render(<Component />);`;
+
+export const LocalizableInputWithURL = () => {
+	const scope = {
+		ClayLocalizedInput,
+		spritemap,
+		useState,
+	};
+
+	return (
+		<Editor
+			code={localizableInputWithURLCode}
+			imports={localizableInputImports}
+			scope={scope}
+		/>
+	);
+};