diff --git a/README.md b/README.md
index 7385238..4caf701 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ This library is in early alpha stage. The list of supported components is pretty
 ## Supported Components
 
 - Checkbox
-    - Model: checked
+    - Model: :checked / @change
     - Props: disabled, label
 - Button
     - Props: disabled, checked, primary
@@ -35,12 +35,13 @@ This library is in early alpha stage. The list of supported components is pretty
     - Props: iconName
 - Image
     - Info: Take a look at the [Official Documentation](https://developer.microsoft.com/en-us/fabric#/components/image). I implemented all features and the syntax is very similar!
+- TextField
+    - Model: :text / @input
+    - Props: label, disabled, multiline, borderless, required, resizable, underlined, inputClassName
 
 ## In-Progress Components
 
-- TextField
 - ChoiceGroup
-- Icon
 
 ## Contribution
 
diff --git a/src/components/Overview.vue b/src/components/Overview.vue
index f31a190..511f508 100644
--- a/src/components/Overview.vue
+++ b/src/components/Overview.vue
@@ -18,6 +18,9 @@ import {ImageFit} from "./Image/OfficeImage.types";
         <OfficeImage src="http://placehold.it/350x150" alt="Example" maximizeFrame/>
         <hr>
         <OfficeIcon iconName="BingLogo"/>
+        <hr>
+        <OfficeTextField label="Test Text" v-model="txt"></OfficeTextField>
+        <OfficeTextField label="Test Text" underlined required v-model="txt"></OfficeTextField>
     </div>
 </template>
 
@@ -30,6 +33,7 @@ import {ImageFit} from "./Image/OfficeImage.types";
     import {Component, Prop, Vue} from "vue-property-decorator";
     import OfficeButton from "./Button/OfficeButton.vue";
     import OfficeCheckbox from "./Checkbox/OfficeCheckbox.vue";
+    import OfficeTextField from "@/components/TextField/OfficeTextField.vue";
 
     @Component({
         components: {
@@ -37,11 +41,13 @@ import {ImageFit} from "./Image/OfficeImage.types";
             OfficeImage,
             OfficeLabel,
             OfficeCheckbox,
-            OfficeButton
+            OfficeButton,
+            OfficeTextField
         },
     })
     export default class Overview extends Vue {
         @Prop() private msg!: string;
+        private txt: string = "test";
 
         private currentImageFit: ImageFit = ImageFit.contain;
 
diff --git a/src/components/TextField/OfficeTextField.style.ts b/src/components/TextField/OfficeTextField.style.ts
new file mode 100644
index 0000000..ae6881e
--- /dev/null
+++ b/src/components/TextField/OfficeTextField.style.ts
@@ -0,0 +1,391 @@
+/*
+Taken from https://github.com/OfficeDev/office-ui-fabric-react on 26.12.2018 and slightly modified
+
+License:
+    Office UI Fabric React
+    Copyright (c) Microsoft Corporation
+    All rights reserved.
+    MIT License
+    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+    THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+    Note: Usage of the fonts and icons referenced in Office UI Fabric is subject to the terms listed at http://aka.ms/fabric-assets-license
+
+ */
+
+
+import {AnimationClassNames, FontSizes, HighContrastSelector, ITheme, normalize} from "@/styling";
+import {IStyle, IStyleFunctionOrObject} from "@uifabric/merge-styles";
+import {IOfficeLabelStyles, IOfficeLabelStyleProps} from "../Label/OfficeLabel.types";
+import {getGlobalClassNames} from "@/styling/styles/getGlobalClassNames";
+
+export interface ITextFieldSubComponentStyles {
+    /**
+     * Styling for Label child component.
+     */
+    // TODO: this should be the interface once we"re on TS 2.9.2 but otherwise causes errors in 2.8.4
+    // label: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles>;
+    label: IStyleFunctionOrObject<any, any>;
+}
+
+export interface ITextFieldStyleProps {
+    theme: ITheme;
+    className?: string;
+    disabled?: boolean;
+    focused?: boolean;
+    underlined?: boolean;
+    required: boolean;
+    multiline: boolean;
+    hasLabel: boolean;
+    borderless: boolean;
+    resizable: boolean;
+    inputClassName: string;
+}
+
+export interface ITextFieldStyles {
+    /**
+     * Style for the root element (a button) of the checkbox component in the default enabled/unchecked state.
+     */
+    root?: IStyle;
+
+    /**
+     * Style for the label part (contains the customized checkbox + text) when enabled.
+     */
+    wrapper?: IStyle;
+
+    /**
+     * Style for checkbox in its default unchecked/enabled state.
+     */
+    fieldGroup?: IStyle;
+/*
+    TODO: Implement prefix and suffix
+    /!**
+     * Style for prefix element.
+     *!/
+    prefix: IStyle;
+
+    /!**
+     * Style for suffix element.
+     *!/
+    suffix: IStyle;
+*/
+
+    /**
+     * Style for the checkmark in the default enabled/unchecked state.
+     */
+    field?: IStyle;
+/*
+    TODO: Implement icon for TextField, (depends on OfficeIcon Component[not created by now])
+    /!**
+     * Style for icon prop element.
+     *!/
+    icon: IStyle;
+*/
+
+    /**
+     * Style for error message element.
+     */
+    errorMessage: IStyle;
+
+    /**
+     * Styling for subcomponents.
+     */
+    subComponentStyles: ITextFieldSubComponentStyles;
+}
+
+
+const globalClassNames = {
+    root: "ms-TextField",
+    description: "ms-TextField-description",
+    errorMessage: "ms-TextField-errorMessage",
+    field: "ms-TextField-field",
+    fieldGroup: "ms-TextField-fieldGroup",
+    prefix: "ms-TextField-prefix",
+    suffix: "ms-TextField-suffix",
+    wrapper: "ms-TextField-wrapper",
+
+    multiline: "ms-TextField--multiline",
+    borderless: "ms-TextField--borderless",
+    underlined: "ms-TextField--underlined",
+    unresizable: "ms-TextField--unresizable",
+
+    required: "is-required",
+    disabled: "is-disabled",
+    active: "is-active"
+};
+
+function getLabelStyles(props: ITextFieldStyleProps): IStyleFunctionOrObject<IOfficeLabelStyleProps, IOfficeLabelStyles> {
+    const {underlined, disabled} = props;
+    return () => ({
+        root: [
+            underlined &&
+            disabled && {
+                color: props.theme.palette.neutralTertiary
+            },
+            underlined && {
+                fontSize: FontSizes.medium,
+                marginRight: 8,
+                paddingLeft: 12,
+                paddingRight: 0,
+                lineHeight: "22px",
+                height: 32
+            }
+        ]
+    });
+}
+
+export function getStyles(props: ITextFieldStyleProps): ITextFieldStyles {
+    const {
+        theme,
+        className,
+        disabled,
+        focused,
+        required,
+        multiline,
+        hasLabel,
+        borderless,
+        underlined,
+        resizable,
+        inputClassName
+    } = props;
+
+    const {semanticColors, palette} = theme;
+
+    const classNames = getGlobalClassNames(globalClassNames, theme);
+
+    const fieldPrefixSuffix: IStyle = {
+        background: palette.neutralLighter,
+        color: palette.neutralSecondary,
+        display: "flex",
+        alignItems: "center",
+        padding: "0 10px",
+        lineHeight: 1,
+        whiteSpace: "nowrap"
+    };
+
+    return {
+        root: [
+            classNames.root,
+            required && classNames.required,
+            disabled && classNames.disabled,
+            focused && classNames.active,
+            multiline && classNames.multiline,
+            borderless && classNames.borderless,
+            underlined && classNames.underlined,
+            normalize,
+            {
+                position: "relative",
+                selectors: {
+                    [HighContrastSelector]: {
+                        borderWidth: 2
+                    }
+                }
+            },
+            focused && {
+                borderColor: semanticColors.inputFocusBorderAlt
+            },
+            underlined &&
+            !focused && {
+                border: `0px solid ${semanticColors.inputBorder}`
+            },
+            underlined &&
+            !disabled &&
+            !focused && {
+                selectors: {
+                    ":hover": {
+                        borderColor: semanticColors.inputBorderHovered
+                    }
+                }
+            },
+            className
+        ],
+        wrapper: [
+            classNames.wrapper,
+            underlined && {
+                display: "flex",
+                borderBottomWidth: 1,
+                borderBottomStyle: "solid",
+                borderBottomColor: "inherit",
+                width: "100%"
+            },
+            underlined &&
+            disabled && {
+                borderBottomColor: semanticColors.disabledBackground
+            },
+            underlined &&
+            !disabled && {
+                selectors: {
+                    ":hover": {
+                        selectors: {
+                            [HighContrastSelector]: {
+                                borderColor: "Highlight"
+                            }
+                        }
+                    }
+                }
+            },
+            underlined &&
+            focused && {
+                selectors: {
+                    [HighContrastSelector]: {
+                        borderColor: "Highlight"
+                    }
+                }
+            }
+        ],
+        fieldGroup: [
+            classNames.fieldGroup,
+            normalize,
+            {
+                border: `1px solid ${semanticColors.inputBorder}`,
+                background: semanticColors.bodyBackground,
+                height: 32,
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "stretch",
+                position: "relative",
+                selectors: {
+                    ":hover": {
+                        selectors: {
+                            [HighContrastSelector]: {
+                                borderColor: "Highlight"
+                            }
+                        }
+                    }
+                }
+            },
+            multiline && {
+                minHeight: "60px",
+                height: "auto",
+                display: "flex"
+            },
+            borderless && {
+                borderColor: "transparent",
+                borderWidth: 0
+            },
+            !focused &&
+            !disabled && {
+                selectors: {
+                    ":hover": {
+                        borderColor: semanticColors.inputBorderHovered
+                    }
+                }
+            },
+            focused && {
+                borderColor: semanticColors.inputFocusBorderAlt,
+                selectors: {
+                    [HighContrastSelector]: {
+                        borderWidth: 2,
+                        borderColor: "Highlight"
+                    }
+                }
+            },
+            disabled && {
+                backgroundColor: semanticColors.disabledBackground,
+                borderColor: semanticColors.disabledBackground
+            },
+            underlined && {
+                flex: "1 1 0px",
+                borderWidth: 0,
+                textAlign: "left"
+            },
+            underlined &&
+            disabled && {
+                backgroundColor: "transparent"
+            },
+            !hasLabel &&
+            required && {
+                selectors: {
+                    ":after": {
+                        content: `"*"`,
+                        color: semanticColors.errorText,
+                        position: "absolute",
+                        top: -5,
+                        right: -10
+                    }
+                }
+            }
+        ],
+        field: [
+            classNames.field,
+            normalize,
+            {
+                fontSize: FontSizes.medium,
+                borderRadius: 0,
+                border: "none",
+                background: "none",
+                backgroundColor: "transparent",
+                color: semanticColors.bodyText,
+                padding: "0 12px",
+                width: "100%",
+                minWidth: 0,
+                textOverflow: "ellipsis",
+                outline: 0,
+                selectors: {
+                    "&:active, &:focus, &:hover": { outline: 0 },
+                    "::-ms-clear": {
+                        display: "none"
+                    },
+                    "::placeholder": {
+                        color: semanticColors.inputPlaceholderText,
+                        opacity: 1
+                    },
+                    ":-ms-input-placeholder": {
+                        color: semanticColors.inputPlaceholderText,
+                        opacity: 1
+                    }
+                }
+            },
+            multiline &&
+            !resizable && [
+                classNames.unresizable,
+                {
+                    resize: "none"
+                }
+            ],
+            multiline && {
+                minHeight: "inherit",
+                lineHeight: 17,
+                flexGrow: 1,
+                paddingTop: 6,
+                overflow: "auto",
+                width: "100%"
+            },
+            disabled && {
+                backgroundColor: "transparent",
+                borderColor: "transparent"
+            },
+            underlined && {
+                textAlign: "left"
+            },
+            underlined &&
+            disabled && {
+                backgroundColor: "transparent",
+                color: semanticColors.disabledText
+            },
+            focused && {
+                selectors: {
+                    [HighContrastSelector]: {
+                        padding: "0 11px 0 11px"
+                    }
+                }
+            },
+            inputClassName
+        ],
+        errorMessage: [
+            classNames.errorMessage,
+            AnimationClassNames.slideDownIn20,
+            theme.fonts.small,
+            {
+                color: semanticColors.errorText,
+                margin: 0,
+                paddingTop: 5,
+                display: "flex",
+                alignItems: "center"
+            }
+        ],
+        subComponentStyles: {
+            label: getLabelStyles(props)
+        }
+    };
+}
diff --git a/src/components/TextField/OfficeTextField.vue b/src/components/TextField/OfficeTextField.vue
new file mode 100644
index 0000000..6b802fd
--- /dev/null
+++ b/src/components/TextField/OfficeTextField.vue
@@ -0,0 +1,76 @@
+<template>
+    <div :class="classNames.root">
+        <div :class="classNames.wrapper">
+            <OfficeLabel :for="id" v-if="hasLabel" :required="required">
+                {{label}}
+            </OfficeLabel>
+            <div :class="classNames.fieldGroup">
+                <input
+                        v-if="!multiline"
+                        type="text"
+                        @focus="focused = true"
+                        @blur="focused = false"
+                        @input="$emit('input', $event.target.value)"
+                        :id="id"
+                        :value="text"
+                        :class="classNames.field"/>
+                <textarea
+                        v-else
+                        value={this.state.value}
+                        @input="$emit('input', $event.target.value)"
+                        @focus="focused = true"
+                        @blur="focused = false"
+                        :id="id"
+                        :value="text"
+                        :class="classNames.field"></textarea>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Vue, Model, Prop} from "vue-property-decorator";
+    import OfficeLabel from "@/components/Label/OfficeLabel.vue";
+    import {mergeStyleSets} from "@uifabric/merge-styles";
+    import {getStyles} from "@/components/TextField/OfficeTextField.style";
+    import {createTheme} from "@/styling";
+
+    @Component({
+        components: {OfficeLabel}
+    })
+    export default class OfficeTextField extends Vue {
+        get hasLabel(): boolean {
+            return this.label != null;
+        }
+
+        @Model("input", {type: String}) private text!: string;
+
+        @Prop({type: Boolean, default: false}) private disabled!: boolean;
+        @Prop({type: Boolean, default: false}) private multiline!: boolean;
+        @Prop({type: Boolean, default: false}) private borderless!: boolean;
+        @Prop({type: String, default: ""}) private inputClassName!: string;
+        @Prop({type: String, default: ""}) private label!: string;
+        @Prop({type: Boolean, default: false}) private required!: boolean;
+        @Prop({type: Boolean, default: false}) private resizable!: boolean;
+        @Prop({type: Boolean, default: false}) private underlined!: boolean;
+
+        private focused: boolean = false;
+        private id: number = (Math.random() * 100000) + 1;
+
+        private get classNames() {
+            return mergeStyleSets(getStyles({
+                focused: this.focused,
+                disabled: this.disabled,
+                multiline: this.multiline,
+                borderless: this.borderless,
+                className: '',
+                hasLabel: this.hasLabel,
+                inputClassName: this.inputClassName,
+                required: this.required,
+                resizable: this.resizable,
+                underlined: this.underlined,
+                theme: createTheme({})
+            }));
+        }
+    }
+</script>