diff --git a/src/components/InputField/InputField.vue b/src/components/InputField/InputField.vue
new file mode 100644
index 0000000000..3b7fb8e314
--- /dev/null
+++ b/src/components/InputField/InputField.vue
@@ -0,0 +1,328 @@
+<!--
+  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="input-field">
+		<label v-if="!labelOutside && label !== undefined"
+			class="input-field__label"
+			:class="{ 'input-field__label--hidden': !labelVisible }"
+			:for="inputName">
+			{{ label }}
+		</label>
+		<div class="input-field__main-wrapper">
+			<input v-bind="$attrs"
+				ref="input"
+				:name="inputName"
+				class="input-field__input"
+				:type="type"
+				:placeholder="computedPlaceholder"
+				aria-live="polite"
+				:class="{
+					'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,
+					'input-field__input--leading-icon': hasLeadingIcon,
+					'input-field__input--success': success,
+					'input-field__input--error': error,
+				}"
+				:value="value"
+				v-on="$listeners"
+				@input="handleInput">
+
+			<!-- Leading icon -->
+			<div class="input-field__icon input-field__icon--leading">
+				<!-- Leading material design icon in the text field, set the size to 18 -->
+				<slot />
+			</div>
+
+			<!-- Success and error icons -->
+			<div v-if="success || error" class="input-field__icon input-field__icon--trailing">
+				<Check v-if="success" :size="18" />
+				<AlertCircle v-else-if="error" :size="18" />
+			</div>
+
+			<!-- trailing button -->
+			<Button v-else-if="showTrailingButton"
+				type="tertiary-no-background"
+				class="input-field__clear-button"
+				@click="handleTrailingButtonClick">
+				<!-- Populating this slot creates a trailing button within the
+				input boundaries that emits a `trailing-button-click` event -->
+				<template slot="icon">
+					<slot name="trailing-button-icon" />
+				</template>
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script>
+import Button from '../Button/index.js'
+import Check from 'vue-material-design-icons/Check'
+import AlertCircle from 'vue-material-design-icons/AlertCircleOutline'
+import GenRandomId from '../../utils/GenRandomId.js'
+
+export default {
+	name: 'InputField',
+
+	components: {
+		Button,
+		Check,
+		AlertCircle,
+	},
+
+	props: {
+		/**
+		 * The value of the input field
+		 */
+		value: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The input element type
+		 */
+		type: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The hidden input label for accessibility purposes. This will also
+		 * be used as a placeholder unless the placeholder prop is populated
+		 * with a different string.
+		 */
+		label: {
+			type: String,
+			default: undefined,
+		},
+
+		/**
+		 * Pass in true if you want to use an external label. This is useful
+		 * if you need a label that looks different from the one provided by
+		 * this component
+		 */
+		labelOutside: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * We normally have the lable hidden visually and use it for
+		 * accessibility only. If you want to have the label visible just above
+		 * the input field pass in true to this prop.
+		 */
+		labelVisible: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The placeholder of the input. This defaults as the string that's
+		 * passed into the label prop. In order to remove the placeholder,
+		 * pass in an empty string.
+		 */
+		placeholder: {
+			type: String,
+			default: undefined,
+		},
+
+		/**
+		 * Controls whether to display the trailing button.
+		 */
+		showTrailingButton: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Toggles the success state of the component. Adds a checkmark icon.
+		 * this cannot be used together with canClear.
+		 */
+		success: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Toggles the error state of the component. Adds an error icon.
+		 * this cannot be used together with canClear.
+		 */
+		error: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		inputName() {
+			return 'input' + GenRandomId()
+		},
+
+		hasLeadingIcon() {
+			return this.$slots.default
+		},
+
+		hasTrailingIcon() {
+			return this.success
+		},
+
+		hasPlaceholder() {
+			return this.placeholder !== '' && this.placeholder !== undefined
+		},
+
+		computedPlaceholder() {
+			if (this.labelVisible) {
+				return this.hasPlaceholder ? this.placeholder : ''
+			} else {
+				return this.hasPlaceholder ? this.placeholder : this.label
+			}
+		},
+	},
+
+	watch: {
+		label() {
+			this.validateLabel()
+		},
+
+		labelOutside() {
+			this.validateLabel()
+		},
+	},
+
+	methods: {
+		handleInput(event) {
+			this.$emit('update:value', event.target.value)
+		},
+
+		handleTrailingButtonClick(event) {
+			this.$emit('trailing-button-click', event)
+		},
+
+		validateLabel() {
+			if (this.label && !this.labelOutside) {
+				throw new Error('You need to add a label to the textField component. Either use the prop label or use an external one, as per the example in the documentation')
+			}
+		},
+	},
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.input-field {
+	position: relative;
+	width: 100%;
+	border-radius: var(--border-radius-large);
+
+	&__main-wrapper {
+		height: 36px;
+		position: relative;
+	}
+
+	&__input {
+		margin: 0;
+		padding: 0 12px;
+		font-size: var(--default-font-size);
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+		border: 2px solid var(--color-border-dark);
+		height: 36px !important;
+		border-radius: var(--border-radius-large);
+		text-overflow: ellipsis;
+		cursor: pointer;
+		width: 100%;
+		-webkit-appearance: textfield !important;
+		-moz-appearance: textfield !important;
+
+		&:hover {
+			border-color: var(--color-primary-element);
+		}
+		&:focus {
+			cursor: text;
+		}
+
+		&--success {
+			border-color: var(--color-success) !important; //Override hover border color
+		}
+
+		&--error {
+			border-color: var(--color-error) !important; //Override hover border color
+		}
+
+		&--leading-icon {
+			padding-left: 28px;
+		}
+
+		&--trailing-icon {
+			padding-right: 28px;
+		}
+	}
+
+	&__label {
+		padding: 4px 0;
+		display: block;
+
+		&--hidden {
+			position: absolute;
+			left: -10000px;
+			top: auto;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+		}
+	}
+
+	&__icon {
+		position: absolute;
+		height: 32px;
+		width: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0.7;
+		&--leading {
+			bottom: 2px;
+			left: 2px;
+		}
+
+		&--trailing {
+			bottom: 2px;
+			right: 2px;
+		}
+	}
+
+	&__clear-button {
+		position: absolute;
+		top: 2px;
+		right: 1px;
+	}
+}
+
+::v-deep .button-vue {
+	min-width: unset;
+	min-height: unset;
+	height: 32px;
+	width: 32px !important;
+	border-radius: var(--border-radius-large);
+}
+
+</style>
diff --git a/src/components/InputField/index.js b/src/components/InputField/index.js
new file mode 100644
index 0000000000..93eed48da1
--- /dev/null
+++ b/src/components/InputField/index.js
@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import InputField from './InputField.vue'
+
+export default InputField
diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
new file mode 100644
index 0000000000..cea0390c15
--- /dev/null
+++ b/src/components/TextField/TextField.vue
@@ -0,0 +1,254 @@
+<!--
+  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<docs>
+### Description
+
+General purpose text field component.
+Note: the inner html `input` element inherits all the attributes from the
+textField component so you can add things like `autocomplete`, `maxlength`
+and `minlength`.
+
+```
+<template>
+	<div class="wrapper">
+		<TextField :value.sync="text1"
+			label="Leading icon and trailing button"
+			trailing-button-icon="close"
+			:show-trailing-button="text1 !== ''"
+			@trailing-button-click="clearText">
+			<Magnify :size="16" />
+		</TextField>
+		<TextField :value.sync="text2"
+			label="Success state"
+			:success="true"
+			@trailing-button-click="clearText">
+		</TextField>
+		<TextField :value.sync="text3"
+			label="Error state"
+			:error="true"
+			@trailing-button-click="clearText">
+		</TextField>
+		<TextField :value.sync="text4"
+			label="Internal label"
+			placeholder="That can be used together with placeholder"
+			:label-visible="true"
+			trailing-button-icon="close"
+			:show-trailing-button="text4 !== ''"
+			@trailing-button-click="clearText">
+			<Lock :size="16" />
+		</TextField>
+		<div class="external-label">
+			<label for="$refs.textField.id">External label</label>
+			<TextField :value.sync="text5"
+				ref="textField"
+				:label-outside="true"
+				@trailing-button-click="clearText" />
+		</div>
+	</div>
+</template>
+<script>
+import Magnify from 'vue-material-design-icons/Magnify'
+import Lock from 'vue-material-design-icons/Lock'
+import Close from 'vue-material-design-icons/Close'
+
+export default {
+	data() {
+		return {
+			text1: '',
+			text2: '',
+			text3: '',
+			text4: '',
+			text5: '',
+		}
+	},
+
+	components: {
+		Magnify,
+		Lock,
+		Close,
+	},
+
+	methods: {
+		clearText() {
+			this.text1 = ''
+			this.text3 = ''
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.wrapper {
+	display: flex;
+	gap: 4px;
+	align-items: flex-end;
+	flex-wrap: wrap;
+}
+
+.external-label {
+	display: flex;
+	width: 100%;
+}
+</style>
+```
+</docs>
+
+<template>
+	<InputField v-bind="$props"
+		v-on="$listeners"
+		@input="handleInput">
+		<!-- Default slot for the leading icon -->
+		<slot />
+		<template slot="trailing-button-icon">
+			<Close v-if="trailingButtonIcon === 'close'" :size="20" />
+			<ArrowRight v-else-if="trailingButtonIcon === 'arrowRight'" :size="20" />
+		</template>
+	</InputField>
+</template>
+
+<script>
+
+import InputField from '../InputField/InputField.vue'
+import Close from 'vue-material-design-icons/Close'
+import ArrowRight from 'vue-material-design-icons/ArrowRight'
+
+export default {
+	name: 'TextField',
+
+	components: {
+		InputField,
+		Close,
+		ArrowRight,
+	},
+
+	props: {
+		/**
+		 * The value of the input field
+		 */
+		value: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The type of the input element, it can be `text`, `password`,
+		 * `email`, `number`, `tel` and `url`.
+		 */
+		type: {
+			type: String,
+			default: 'text',
+			validator: (value) => [
+				'text',
+				'password',
+				'email',
+				'tel',
+				'url',
+			].includes(value),
+		},
+
+		/**
+		 * The hidden input label for accessibility purposes. This will also
+		 * be used as a placeholder unless the placeholder prop is populated
+		 * with a different string. This is required if an external label is
+		 * not provided.
+		 */
+		label: {
+			type: String,
+			default: undefined,
+		},
+
+		/**
+		 * Pass in true if you want to use an external label. This is useful
+		 * if you need a label that looks different from the one provided by
+		 * this component
+		 */
+		labelOutside: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * We normally have the lable hidden visually and use it for
+		 * accessibility only. If you want to have the label visible just above
+		 * the input field pass in true to this prop.
+		 */
+		labelVisible: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The placeholder of the input. This defaults as the string that's
+		 * passed into the label prop. In order to remove the placeholder,
+		 * pass in an empty string.
+		 */
+		placeholder: {
+			type: String,
+			default: undefined,
+		},
+
+		/**
+		 * Controls whether to display the trailing button.
+		 */
+		showTrailingButton: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Specifies which material design icon should be used for the trailing
+		 * button. Values can be `close` anbd `arrowRight`.
+		 */
+		trailingButtonIcon: {
+			type: String,
+			default: 'close',
+			validator: (value) => [
+				'close',
+				'arrowRight',
+			].includes(value),
+		},
+
+		/**
+		 * Toggles the success state of the component. Adds a checkmark icon.
+		 * this cannot be used together with canClear.
+		 */
+		success: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Toggles the error state of the component. Adds an error icon.
+		 * this cannot be used together with canClear.
+		 */
+		error: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	methods: {
+		handleInput(event) {
+			this.$emit('update:value', event.target.value)
+		},
+	},
+}
+</script>
diff --git a/src/components/TextField/index.js b/src/components/TextField/index.js
new file mode 100644
index 0000000000..64c6c4e26c
--- /dev/null
+++ b/src/components/TextField/index.js
@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import TextField from './TextField.vue'
+
+export default TextField
diff --git a/src/components/index.js b/src/components/index.js
index 1dd1c75a29..43dc65bdcf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -71,3 +71,4 @@ export { default as RichContenteditable } from './RichContenteditable/index.js'
 export { default as SettingsSection } from './SettingsSection/index.js'
 export { default as UserBubble } from './UserBubble/index.js'
 export { default as Button } from './Button/index.js'
+export { default as TextField } from './TextField/index.js'
diff --git a/styleguide.config.js b/styleguide.config.js
index 4742a85f35..fa5778b26a 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -78,6 +78,7 @@ module.exports = {
 				'src/components/RichContenteditable/!(RichContenteditable).vue',
 				'src/components/Settings*/*.vue',
 				'src/components/UserBubble/UserBubbleDiv.vue',
+				'src/components/InputField/InputField.vue',
 			],
 			sections: [
 				{
diff --git a/webpack.dev.js b/webpack.dev.js
index 6d758c94f3..42c4c9b782 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,12 +1,12 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common.js')
 
 module.exports = merge(common, {
 	mode: 'development',
 	devServer: {
 		historyApiFallback: true,
 		noInfo: true,
-		overlay: true
+		overlay: true,
 	},
 	devtool: 'source-map',
 })