diff --git a/src/components/field/__snapshots__/test.js.snap b/src/components/field/__snapshots__/test.js.snap
index 1cc2a87..0e80e92 100644
--- a/src/components/field/__snapshots__/test.js.snap
+++ b/src/components/field/__snapshots__/test.js.snap
@@ -249,6 +249,7 @@ exports[`renders accessory 1`] = `
         value=""
       />
       <View
+        collapsable={undefined}
         style={
           Object {
             "alignSelf": "flex-start",
@@ -1048,6 +1049,184 @@ exports[`renders error 1`] = `
 </View>
 `;
 
+exports[`renders left accessory 1`] = `
+<View
+  onResponderRelease={[Function]}
+  onStartShouldSetResponder={[Function]}
+  pointerEvents="auto"
+  style={undefined}
+>
+  <View
+    collapsable={undefined}
+    style={
+      Object {
+        "backgroundColor": "transparent",
+        "borderBottomColor": "rgba(0, 0, 0, 0.38)",
+        "borderBottomWidth": 0.5,
+        "height": 64,
+        "paddingBottom": 8,
+        "paddingTop": 32,
+      }
+    }
+  >
+    <View
+      collapsable={undefined}
+      style={
+        Object {
+          "position": "absolute",
+          "top": 36,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        collapsable={undefined}
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        style={
+          Object {
+            "color": "rgba(0, 0, 0, 0.38)",
+            "fontSize": 16,
+          }
+        }
+      >
+        test
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        collapsable={undefined}
+        style={
+          Object {
+            "alignSelf": "flex-start",
+            "justifyContent": "center",
+            "opacity": 0,
+            "top": 2,
+          }
+        }
+      >
+        <Image />
+      </View>
+      <TextInput
+        allowFontScaling={true}
+        autoCapitalize="sentences"
+        disableFullscreenUI={true}
+        editable={true}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onChangeText={[Function]}
+        onContentSizeChange={[Function]}
+        onFocus={[Function]}
+        renderLeftAccessory={[Function]}
+        selectionColor="rgb(0, 145, 234)"
+        style={
+          Array [
+            Object {
+              "flex": 1,
+              "margin": 0,
+              "padding": 0,
+              "top": 2,
+            },
+            Object {
+              "color": "rgba(0, 0, 0, .87)",
+              "fontSize": 16,
+              "height": 24,
+              "textAlign": "left",
+            },
+            undefined,
+          ]
+        }
+        underlineColorAndroid="transparent"
+        value=""
+      />
+    </View>
+  </View>
+  <View
+    collapsable={undefined}
+    style={
+      Object {
+        "flexDirection": "row",
+        "height": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "flex-start",
+            "bottom": 0,
+            "left": 0,
+            "paddingVertical": 4,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          collapsable={undefined}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "rgb(213, 0, 0)",
+              "fontSize": 0,
+              "opacity": 0,
+              "width": "100%",
+            }
+          }
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "alignItems": "flex-start",
+            "bottom": 0,
+            "left": 0,
+            "paddingVertical": 4,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          collapsable={undefined}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "rgba(0, 0, 0, .38)",
+              "fontSize": 12,
+              "opacity": 1,
+              "width": "100%",
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders multiline value 1`] = `
 <View
   onResponderRelease={[Function]}
diff --git a/src/components/field/index.js b/src/components/field/index.js
index 1905228..aa5e7c7 100644
--- a/src/components/field/index.js
+++ b/src/components/field/index.js
@@ -87,6 +87,7 @@ export default class TextField extends PureComponent {
     disabledLineType: Line.propTypes.type,
     disabledLineWidth: PropTypes.number,
 
+    renderLeftAccessory: PropTypes.func,
     renderAccessory: PropTypes.func,
 
     prefix: PropTypes.string,
@@ -283,17 +284,18 @@ export default class TextField extends PureComponent {
     }
   }
 
-  renderAccessory() {
-    let { renderAccessory } = this.props;
+  renderAccessory(type, style = {}) {
+    let { renderLeftAccessory, renderAccessory } = this.props;
+    const renderAccessoryComponent = type === 'right' ? renderAccessory : renderLeftAccessory;
 
-    if ('function' !== typeof renderAccessory) {
+    if ('function' !== typeof renderAccessoryComponent) {
       return null;
     }
 
     return (
-      <View style={styles.accessory}>
-        {renderAccessory()}
-      </View>
+      <Animated.View style={[styles.accessory, style]}>
+        {renderAccessoryComponent()}
+      </Animated.View>
     );
   }
 
@@ -451,6 +453,14 @@ export default class TextField extends PureComponent {
 
       fontSize: titleFontSize,
     };
+
+    let accessoryStyle = {
+      opacity: focus.interpolate({
+        inputRange: [-1, 0, 1],
+        outputRange: [1, active ? 1 : 0, 1],
+      }),
+    };
+
     let titleFontSizeMultiplier = this.props.helpersNumberOfLines;
 
     let helperContainerStyle = {
@@ -519,6 +529,7 @@ export default class TextField extends PureComponent {
           <Label {...labelProps}>{label}</Label>
 
           <View style={styles.row}>
+            {this.renderAccessory('left', accessoryStyle)}
             {this.renderAffix('prefix', active, focused)}
 
             <TextInput
@@ -538,7 +549,7 @@ export default class TextField extends PureComponent {
             />
 
             {this.renderAffix('suffix', active, focused)}
-            {this.renderAccessory()}
+            {this.renderAccessory('right')}
           </View>
         </Animated.View>
 
diff --git a/src/components/field/test.js b/src/components/field/test.js
index 73b390f..4e1df0a 100644
--- a/src/components/field/test.js
+++ b/src/components/field/test.js
@@ -127,3 +127,14 @@ it('renders accessory', () => {
   expect(field)
     .toMatchSnapshot();
 });
+
+it('renders left accessory', () => {
+  let render = () => <Image />
+
+  let field = renderer
+    .create(<TextField {...props} renderLeftAccessory={render} />)
+    .toJSON();
+
+  expect(field)
+    .toMatchSnapshot();
+});
\ No newline at end of file